Nieuws:

We zijn er weer.

Na lange tijd van afwezigheid zijn we er weer  :laugh:
We hebben alle wachtwoorden gereset, je oude wachtwoord werkt niet meer.Je moet via het "wachtwoord vergeten"-linkje je wachtwoord resetten. Je krijgt hiervoor een mailtje op het adres dat je bij ons geregistreerd hebt.

De komende tijd zijn we nog druk bezig om de rest van de site op te bouwen, dus het kan zijn dat sommige onderdelen (tijdelijk) niet werken.

Welkom, Gast. Alsjeblieft inloggen of registreren.
Heb je de activerings-mail niet ontvangen?

Auteur Topic: CSS3 transitions en javascript  (gelezen 329 keer)

Offline blokkendoos

  • Lid
  • Steunpunt: Nee
CSS3 transitions en javascript
« Gepost op: 2015/05/02, 12:07:01 »
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
« Laatst bewerkt op: 2015/05/02, 12:37:16 door blokkendoos »

Offline commandoline

  • LoCo-contact
    • marten-de-vries
    • Marten-de-Vries.nl
  • Steunpunt: Nee
Re: CSS3 transitions en javascript
« Reactie #1 Gepost op: 2015/05/04, 12:05:58 »
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:

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

en als dat niet werkt:
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.)

Offline blokkendoos

  • Lid
  • Steunpunt: Nee
Re: CSS3 transitions en javascript
« Reactie #2 Gepost op: 2015/05/09, 12:33:53 »
Bedankt voor je antwoorden.