javascript lägga till css transition efterhand

Hej!

Efter att ha suttit med detta problem x-antal timmar och inte hittat ett vettigt svar på nätet tänkte jag fråga här.

Jag försöker lägga till två olika klasser till element.

Första klassen gömmer elementet med "visible:hidden" och "opacity:0", andra klassen lägger till "transition" till samma element. Men det spelar ingen roll hur jag lägger upp det, elementet göms alltid med en "transition". Det är som om den läggs på först även om man specifikt lägger den efter i koden. Har även försökt med att lägga dem i varsin promise. Men ändå göms elementen med en transition.

Den enda lösningen hittills är att använda sig av settimeout. Men hur fungerar logiken att transition verkar alltid "finnas" med även om man lägger klassen på i efterhand? Är det att klassen läggs på först, men andra klassen läggs på såpass snabbt innan webbläsaren hunnit börja rendera det?

Lite luddigt men hoppas ni förstår.

Hej!

Jo det stämmer. Tänker väl mest om JavaScript inte är aktiverat hos användaren så kommer inte elementet vara dold. Därför försöker man på sig detta.

Men min fundering är mest varför transition ens triggas när den klassen läggs på efter man lagt på klassen som "visar" elementen.

En bra idé men inte något som hjälper i detta fall tyvärr.

Det ska finnas en transition, bara inte första gången. Men får helt enkelt använda en timeout tror jag.