Bonjour à tous.
Je me permets de lancer une bouteille à la mer en ayant déjà dans l'idée que j'en demande trop à CSS3. Et plus particulièrement à la propriété animation.
En effet, je me faisait la réflexion depuis que je travaille sur les transitions et animations, la limite entre ce qui revient à JS et ce qui doit être fait par le CSS est de plus en plus flou, avec de tels élément comme la pseudo classe after ou before, la propriété content, le déclenchement d'effet au survol etc.
Au développeur web de savoir faire la distinction de manière subtile entre présentation et gestion.
Mon problème: je donne à un élément une animation par défaut, avec la propriété animation-iteration-count à 1, pour ne la jouer qu'au moment ou l’élément s'affiche.
E{animation:intro 1s linear 1;}
Jusqu'ici, tout va bien.
On corse la chose, en appliquant une animation différente sur ce même élément, mais au survol (:hover).
E:hover{animation:hoverAnnim 1s linear infinite;}
Jusqu'ici, tout va bien.
Ou presque... Puisque les 2 navigateurs que j'utilise, ou plutôt les deux moteurs de rendu (webkit et moz), vont appliquer de nouveau l'animation initiale au moment ou le curseur quitte la zone de l'élement.
Je comprend tout à fait ce comportement, puisque finalement, nous revenons à l'état initial :
E > E:hover > E. Les animations sont donc appliquées à l'affichage d'un élément, mais aussi au passage à l'état définit. L'absence de pseudo classe est aussi un état en soit.
Bien évidement, dans mon cas particulier, je ne voudrais pas que cette animation soit appliquée de nouveau lorsque le curseur quitte l'élement.
Voici un petit exemple :
http://jsfiddle.net/crey/5bMrq/embedded/result/
Ma question : Quelqu'un a t-il déjà travaillé sur une situation similaire d'application de plusieurs
animations CSS sur un élément en fonction d’évènement ?
Il n'existe pas de pseudo classe équivalent à l’événement "mouseout", et c'est normal, car plus que d’événement, le CSS concerne l'état d'un élément.
J'ai pu voir dans mes recherches des cas un peu similaires, tel que :
http://forum.alsacreations.com/topic.php?fid=4&tid=58877&s=hover
La solution serait de passer par JS, ce qui me parait plutôt logique.
Mais ne sait-on jamais, je pose donc la question au cas ou... Car je ne suis pas certains de pouvoir mettre du JS dans mon cas précis (le fameux gap entre monde idéal et monde en prod). En JS, je saurai me débrouiller en deux coup de cuillères à pots. Je verrais selon la marge de manœuvre qui me se présentera à moi. Ce sera ou bien abandon de l'état :hover, ou bien l'application de classe via JS.
Merci de m'avoir lu.
Cédric.
Je me permets de lancer une bouteille à la mer en ayant déjà dans l'idée que j'en demande trop à CSS3. Et plus particulièrement à la propriété animation.
En effet, je me faisait la réflexion depuis que je travaille sur les transitions et animations, la limite entre ce qui revient à JS et ce qui doit être fait par le CSS est de plus en plus flou, avec de tels élément comme la pseudo classe after ou before, la propriété content, le déclenchement d'effet au survol etc.
Au développeur web de savoir faire la distinction de manière subtile entre présentation et gestion.
Mon problème: je donne à un élément une animation par défaut, avec la propriété animation-iteration-count à 1, pour ne la jouer qu'au moment ou l’élément s'affiche.
E{animation:intro 1s linear 1;}
Jusqu'ici, tout va bien.
On corse la chose, en appliquant une animation différente sur ce même élément, mais au survol (:hover).
E:hover{animation:hoverAnnim 1s linear infinite;}
Jusqu'ici, tout va bien.
Ou presque... Puisque les 2 navigateurs que j'utilise, ou plutôt les deux moteurs de rendu (webkit et moz), vont appliquer de nouveau l'animation initiale au moment ou le curseur quitte la zone de l'élement.
Je comprend tout à fait ce comportement, puisque finalement, nous revenons à l'état initial :
E > E:hover > E. Les animations sont donc appliquées à l'affichage d'un élément, mais aussi au passage à l'état définit. L'absence de pseudo classe est aussi un état en soit.
Bien évidement, dans mon cas particulier, je ne voudrais pas que cette animation soit appliquée de nouveau lorsque le curseur quitte l'élement.
Voici un petit exemple :
http://jsfiddle.net/crey/5bMrq/embedded/result/
Ma question : Quelqu'un a t-il déjà travaillé sur une situation similaire d'application de plusieurs
animations CSS sur un élément en fonction d’évènement ?
Il n'existe pas de pseudo classe équivalent à l’événement "mouseout", et c'est normal, car plus que d’événement, le CSS concerne l'état d'un élément.
J'ai pu voir dans mes recherches des cas un peu similaires, tel que :
http://forum.alsacreations.com/topic.php?fid=4&tid=58877&s=hover
La solution serait de passer par JS, ce qui me parait plutôt logique.
Mais ne sait-on jamais, je pose donc la question au cas ou... Car je ne suis pas certains de pouvoir mettre du JS dans mon cas précis (le fameux gap entre monde idéal et monde en prod). En JS, je saurai me débrouiller en deux coup de cuillères à pots. Je verrais selon la marge de manœuvre qui me se présentera à moi. Ce sera ou bien abandon de l'état :hover, ou bien l'application de classe via JS.
Merci de m'avoir lu.
Cédric.