[Résolu] Transitions

Bonjour

Pendant des années j'ai fait des transitions entre images en JS avec timer, et j''essaie d'utiliser les transitions de CSS3.

J'ai mis un délai de 5s avant déclenchement de la transition, une durée de 5 s pour la transition, et je relance sur l'image suivante au bout de 15 s.

On devrait voir la première transition apparaître au bout de 5 s et durer 5 s, mais en fait la première image n'est pas affichée, et par la suite, toutes les 15s on a une nouvelle image, mais pas de transition

Tout le code se trouve dans http://paralletes.free.fr/tests/ctest1.html

Pourriez vous me dire ce qui cloche dans ce code?
Merci de votre aide.

Bonjour,

Tu as déjà un z_index à la place d'un z-index, mais ça n'arrange pas encore le truc.

SolidSnake a écrit :
Bonjour,

Tu as déjà un z_index à la place d'un z-index, mais ça n'arrange pas encore le truc.

Bonne remarque, c'est toujours bon à corriger mais ce n'est malheureusement pas ça la solution cherchée...
Comme on disait dans mon équipe "c'est un bug de plus en moins"

Bonjour,

Le problème c'est que la classe est créée en même temps que l'élément image, alors que les transitions sont spécifiques à un changement d'état (comme avec :hover par exemple). Il faut donc passer par une animation en css qui pourra commencer dès la création de la classe. J'ai fait un test et ça fonctionne... mais seulement sur la deuxième image du slide.

En effet : une fois posée sur la deuxième image la classe .showing persiste, seul l'attribut src est remplacé, donc une seule exécution de la keyframe...

Il faudrait par exemple supprimer la classe un court instant puis la rappeler.

PS : Le script est léger et plutôt sympa de ce point de vu. Mais j'aurais plutôt mis toutes les images dans le html et j'aurais ensuite fais joujou avec le javascript, cela aurait été plus accessible que des images avec des attributs src et alt vides...
Modifié par Olivier C (16 Dec 2015 - 20:20)

Olivier C a écrit :
Le problème c'est que la classe est créée en même temps que l'élément image, alors que les transitions sont spécifiques à un changement d'état (comme avec :hover par exemple). Il faut donc passer par une animation en css qui pourra commencer dès la création de la classe.

Voici mon code:

function nextSlide() {
	img1.src = dir + imgList[curSlide];
	img2.className = 'vanished';
	curSlide++;
	if(curSlide >= imgList.length) curSlide = 0;
	img2.src = dir + imgList[curSlide];
	img2.className = 'showing';
	setTimeout(nextSlide, 15000);
}

j'ai bien img2className = 'vanished';, puis img2.src = dir + imgList[curSlide];, puis img2.className = 'showing';
Il y a donc bien un premier changement de classe et un deuxième qui devrait relancer le processus.

Olivier C a écrit :
J'ai fait un test et ça fonctionne... mais seulement sur la deuxième image du slide.

Ce test ne marche pas mieux que mon code: les images se succèdent directement et pas progressivement comme j'essaie de le faire.

Olivier C a écrit :
En effet : une fois posée sur la deuxième image la classe .showing persiste, seul l'attribut src est remplacé, donc une seule exécution de la keyframe...
Il faudrait par exemple supprimer la classe un court instant puis la rappeler.

Voir plus haut, showing est annulé par vanished

Olivier C a écrit :
PS : Le script est léger et plutôt sympa de ce point de vue. Mais j'aurais plutôt mis toutes les images dans le html et j'aurais ensuite fais joujou avec le javascript, cela aurait été plus accessible que des images avec des attributs src et alt vides...

Il s'agit d'un test pour apprendre à faire des transitions, le "vrai" code sera sans doute très différent, en particulier la succession des images fera appel à un calcul aléatoire.

Mais simplement pour ma compréhension: qu'est-ce que ça veut dire "cela aurait été plus accessible que des images avec des attributs src et alt vides" ? Il s'agit bien d'une "enluminure" sans grande signification sémantique autre qu'un "teasing": regardez mon site comme il est beau, voyez mes images qu'elles sont belles!!! Comment rendre ça "accessible" à des mal voyants alors que l'objet même est d'en mettre plein la vue?

Bon, j'ai réussi à faire un truc qui fonctionne à peu près...

Le plus gros soucis en fait, vient du fait que l'on charge les images dynamiquement et j'ai rapidement constaté que le CSS "fonctionne" uniquement lorsque l'image est chargée.

Comme l'a signalé Olivier, je mettrais toutes les images directement sur la page, comme ça tu ne t'embêtes pas.
Ou alors comme certains sliders tout fait de ce type, tu en charges arbitrairement 5 (plus de 2), et puis dynamiquement tu charges ensuite les autres, statistiquement tu ne seras plus trop em****dé par les chargements au moment des transitions.

SolidSnake a écrit :
Bon, j'ai réussi à faire un truc qui fonctionne à peu près....

Désolé, mais ça ne fait toujours aucune transition: ça passe directement d'une image à la suivante.

Je veux bien essayer de charger les images à l'avance. Mais comme elles sont depuis belle lurette dans le cache de mon navigateur ce ne doit pas être vraiment la cause du problème.
De plus la transition entre "vanished" et "showing" est sensée démarrer après 5 secondes, ce qui laisse largement le temps de charger une image.

Je peux bien entendu faire les transitions en JS, ça fait des lunes que j'ai fait ça, il suffit de copier le code, mais ce n'est pas le but de l'opération, qui est d'apprendre à me servir des transitions, ce que je n'ai jamais fait jusqu'à présent. A remarquer que je n'ai jamais eu besoin de faire des préchargements avec cette techno antique.

PapyJP a écrit :
Désolé, mais ça ne fait toujours aucune transition: ça passe directement d'une image à la suivante.

Ah, ben chez moi, ça fonctionne, suis-je le seul ?

Non chez moi cela fonctionne aussi.

Le mystère s'épaissit: ça marche sous Chrome mais pas sous FireFox
Un idée?

Salut,
je suis sur firefox et cela ne marche pas pour moi..
De plus je ne vois pas l’intérêt d'utiliser les transitions en css3 si tu continues a utiliser du javascript pour le code (soit on cherche à faire tout marcher sans javascript soit on garde ce qui marche déjà en javascript non ?
Personnellement j'ai l'impression que ça ressemble plus à des animations que des transitions :
http://codepen.io/anon/pen/RraRoP

Ca ne marche pas sur le background ... ce qui oblige à superposer toutes les images :s

@mathieu1004 , tout a fait d'accord avec toi pour la gestion en animation exemple http://codepen.io/anon/pen/eJZBMR

coté js,je proposerais aussi le système d'empilement et d'opacité qui est compatible tout navigateur.
L'avantage du js , c'est que l'on peut configurer le carrousel indépendamment du nombre d'image, c'est plus solide et flexible que le CSS ou il suffit de modifier le nombre d'image pour devoir retouché les règles ...

Reprenons:
1 Pour faire un carousel je prends des images, je les mélange au hasard et je lance le mécanisme. Pour ça, le JS est une excellente solution.
2 Par contre pour faire les transitions, utiliser du JS n'est pas génial: il faut mettre un timer très court et modifier la transparence de 1 ou 2% à chaque fois. C'est pour cela que je pensais utiliser les transitions.
3 Je me suis donc plongé dans la doc et j'ai essayé de faire fonctionner une transition, la plus simple que j'ai pu imaginer
4 Je constate que ca ne marche pas, ce qui n'a rien d'étonnant quand on utilise une techno pour la première fois et je demande leur avis aux membres de ce forum, en espérant que des gens expérimentés vont me dire "mais oui, c'est bien sûr! tu as fait telle ou telle erreur"
5 Pour l'instant je n'ai toujours pas compris ce que j'avais fait de travers et je n'ai donc toujours pas compris comment marchent les transitions.

Encore une fois je ne fais pas cet exercice pour obtenir un carousel, car j'en ai pas mal qui fonctionnent sur divers sites, à base de JS et micro timers. Ce que je cherche à faire c'est comprendre comment utiliser les transitions, en partant d'un exemple que je pensais simple.
Donc je réitère ma question: qu'est ce qui cloche dans mon code? Est-ce un bug de programme qui fait que la façon dont je définis les transitions n'est pas comprise par FF? Est-ce la façon dont je l'utilise pour passer d'une image à la suivante qui ne convient pas? et dans ce cas pourquoi ?

Merci de vos conseils.
Modifié par PapyJP (19 Dec 2015 - 08:59)

Bonsoir,

une transition fait basculer progressivement la valeur d'une règle CSS vers une nouvelle valeur dans un temps donné, rien de plus. [i(]exit les valeur d’état : none, block, hidden, left, ...

Il faut donc un élément existant avec une règle existante et qui a une valeur qui peut-être divisé et une seconde règle avec une valeur différente qui sera appliqué classiquement via une pseudo class comme :hover,:target,:focus ou bien via javascript.

Pour lancer la transition, il suffit basculer d'une valeur à une autre. C'est très basique pour des effet basiques et si l'on veut piloter ça par JavaScript, il suffit d'ajouter/enlever une classe sur un élément déjà présent.

Tu sais déjà tout ça ... en gros, avant d'appliquer une class à l'image, assures toi quelle est déjà chargée et stylée pour modifier son style et déclencher la transition.

probablement qu’un simple préchargement des images avant de lancer le carousel suffirait

SolidSnake a écrit :
Après je suis partisan, de ne pas réinventer la roue à chaque fois, il existe suffisamment de plugin jQuery pour ça.

Mais bon, sur une page statique, sans administration (sans jQuery ?), why not !?

Je suis d'accord, personnellement j'utilise le plugin jQuery Cycle 2, à mon avis l'un des meilleurs et des plus avancé techniquement.

Après c'est vrai que c'est sympa de s'y coller de temps à autre pour progresser. Je trouvais juste l'orientation de développement du script mal partie, autant partir tout de suite du bon pied, après le code est pénible à rectifier.