[Résolu] Transitions

(reprise du message précédent)

Comme expliqué au dessus tu ne peux pas faire un carousel avec uniquement les transitions CSS.

Les transitions CSS c'est la modification des propriétés d'un objet déclenché par un événement (hover, focus, clic).

Pour un carousel, tu peux utiliser les @keyframes, js ou jQuery. Mes prédécesseurs t'ont donné des exemples.
Modifié par Oken (18 Dec 2015 - 10:20)

Plutôt que de "précharger" les images, j'ai fait comme recommandé par SolidSnake: déclencher la transition sur image2.onload. Ça marche effectivment comme j'espérais.

Merci à tous pour cette intéressante discussion.

Oken a écrit :
Comme expliqué au dessus tu ne peux pas faire un carousel avec les transitions CSS.

Les transitions CSS c'est la modification des propriétés d'un objet déclenché par un événement (hover, focus, clic).

Pour un carousel, tu peux utiliser les @keyframes, js ou jQuery. Mes prédécesseurs t'ont donner des exemples.

Je ne cherche pas à faire un carrousel, je cherche à apprendre comment fonctionnent les transitions en prenant comme exemple le passage progressif d'une image à la suivante en changeant la propriété "opacity" (et donc effectivement c'est un carrousel, mais ça pourrait être autre chose)

Mais je vais regarder les autres points, en particulier @keyframes que je ne connais ps du tout
Modifié par PapyJP (18 Dec 2015 - 10:22)

Bonsoir

Après plusieurs essais, le déclenchement de l'affichage progressif d'une image par transition, déclenché par "onload" ne m'a pas donné entière satisfaction.Quand je passe de l'image 1 à l'image 2 et ainsi de suite, ça fonctionne comme j'espérais, mais quand on repasse à l'image 1, il n'y a toujours aucune transition, je suppose que parce que le "onload" est immédiatement satisfait puisque l'image a déjà été chargée au cours de la session.
C'est le genre de chose, par ailleurs, qui doit varier d'un navigateur à l'autre, voire d'une version à l'autre du même navigateur.
J'en suis donc resté à mes timers de 10/1000 secondes et à la modification de l'opacité par JS.

A ce sujet, je suis tombé sur un autre problème, qui est relatif au JS et que je vais donc traiter dans un autre fil.
Modifié par PapyJP (18 Dec 2015 - 17:59)