CSS3 transitions en javascript

[blokkendoos]

Beste mensen,

Ik ben wat aan het pielen met transition voorbeelden van w3schools. Veel werken met een style el:hover. Ik vroeg me af hoe je zoiets niet via hover maar bijv. met een onload-trigger kan realiseren.
Het antwoord daarop luidt dan dat je alleen maar een nieuwe class aan het element hoeft toe te voegen. Dat kan op verschillende manieren. Dat heb ik allemaal wel zo ongeveer geprobeerd maar het werkt voor geen meter. 
Het werkt prima met een :hover boven het item maar niet als ik de class met javascript toevoeg. Wel met een functie die via
 { element.getElementById('blok').style.transition = "width 8s linear 3s" ;
   element.getElementById('blok').style.width = "800px" ;  }
als script werkt.

Ik kan overigens m.b.v. de developer tools zien dat de nieuwe class aan het element wordt toegevoegd, maar er gebeurt niets wat op een transitie lijkt. (Ik gebruik overigens FF 37.02)

Heeft iemand enig idee waarom dit wel met :hover werkt en niet met behulp van javascript een style class toevoegen?

pablo k

[commandoline]

Ik ben hier toevallig op het moment ook mee bezig. Het probleem is dat transitions alleen uitgevoerd worden bij verandering van waarden. In dit geval, wordt de breedte op hetzelfde moment aangepast als dat de transition actief wordt, en dat wordt door de browser niet gezien als een veranderde waarde daarom. Twee oplossingen die ik me herinner:

Code: [Selecteer]

element.clientHeight = element.clientHeight // tussen beide stijl-aanpassingen. Dit forceert de browser om de eerste wijziging uit te voeren.

en als dat niet werkt:

Code: [Selecteer]

element.getElementById('blok').style.transition = "width 8s linear 3s" ;
setTimeout(function () {
  element.getElementById('blok').style.width = "800px" ;
}, 10);

Beide zijn hacks, maar er is voor zover ik weet geen nette manier om dit op te lossen. Testen in verschillende browsers is zeker een goed idee. (Voor het project waar ik zelf mee bezig ben werkt Firefox wel maar Chrome nog niet op het moment, bijvoorbeeld.)

[blokkendoos]

Bedankt voor je antwoorden.