Il y a maintenant quelques semaines sortait l'article Inspirations et techniques pour intégrateurs : Créer de l'interactivité sans Javascript #5, dans lequel je décryptais un prototype de RPG fait uniquement en CSS.
Parmi les différentes techniques utilisées dans cet exemple se trouvait celle que je compte détailler un peu plus aujourd'hui : les transitions à délai "infini".
Que cherche-t-on à reproduire ?
Un exemple va souvent plus vite qu'un discours, donc voilà, nous cherchons à pouvoir contrôler des éléments comme cela, sans Javascript.
See the Pen ZKQdPJ by Benjamin SANCHEZ (@B_Sanchez) on CodePen.
Les transition-delay
Comment arrive-t-on à ce genre de résultats ? C'est simple, en "trichant" avec les transitions, et plus précisément la propriété "transition-delay". Comme il est important de bien comprendre les règles avant de pouvoir tricher efficacement, je vous propose d'aller lire la page correspondant à transition-delay du MDN (en français).
En quelques mots, transition-delay fonctionne de manière très simple : cette propriété impose un délai d'attente avant l'exécution d'une transition. Par exemple transition-delay: 2s impose de manière tout à fait logique un délai de 2s avant d'exécuter la transition.
Maintenant que cela est dit, nous pouvons nous permettre de nous poser une question : que se passe-t-il si nous appliquons un délai que sur un seul des "états" ?
See the Pen mmVZBv by Benjamin SANCHEZ (@B_Sanchez) on CodePen.
Comme vous pouvez le voir sur cet exemple, nous avons applique un délai de 5s à la transition sur l'element, mais nous écrasons cette propriété si l'element est survolé. L'action se passe donc de la maniere suivante :
Avant le survol : l'element est rouge, les transitions ont un délai de 5s mais aucune transition n'est en cours.
Durant le survol : l'element cherche à devenir bleu, et il possède une transition d'une durée de 0s et de délai de 0s pour y parvenir. Il apparaît donc immédiatement bleu.
À la fin du survol, l'element est bleu et cherche à devenir rouge, MAIS il possède une transition d'une durée de 0s et de délai de 5s pour y parvenir. Il lui faudra donc attendre 5s avant de changer de couleur.
Et les états transitionnels ?
Nous avons vu notre exemple "simple" ci-dessus, mais la transition était de 0 s, il n'y avait donc pas d'état transitionnel (ces états ou le carré n'est ni rouge ni bleu, mais dans un état entre les deux). Que se passe t'il si nous ajoutons une durée de transition ?
See the Pen wdMLYB by Benjamin SANCHEZ (@B_Sanchez) on CodePen.
Bingo, la transition arrête l'élément dans un état transitionnel ! De plus, si vous survolez l'élément de nouveau, vous pouvez noter que la transition reprend où nous nous étions arrêté ! De plus, cela fonctionne avec plusieurs "destinations" différentes !
See the Pen ZKQgXR by Benjamin SANCHEZ (@B_Sanchez) on CodePen.
It's Over 99999s !
Enfin, nous pouvons ajouter la dernière pierre à l'edifice, une transition-delay immense (genre 99999 s). De cette manière, nous pouvons nous "assurer" que l'élément ne retournera pas tout seul à la position d'origine.
Cela fonctionne évidemment pour le background, mais aussi pour toutes les animations qui prennent les transitions, comme par exemple background-position ou bien les positions, comme pour notre premier exemple !
See the Pen ZKQdPJ by Benjamin SANCHEZ (@B_Sanchez) on CodePen.
Notez au passage qu'il est important de bien séparer chaque transition agissant sur des propriétés différentes.
Et en production ?
Non. Nononononon. NON.
C'est un hack, c'est super mais cela n'a aucune place en production.