Bonjour,

J'ai vu qu'il était possible de déclencher une animation en cliquant sur un lien mais je n'y arrive pas.

J'ai vu beaucoup d’exemple ou c'était possible et je pense avoir fait pareil mais ça ne marche pas. Quelqu'un serait me dire ou je me plante.

Merci du coup de main.

<div id="slides">

                <div class="slide" id="slide1">
                    <a href="#left" class="iconLeft">
                        <i class="fas fa-angle-left"></i>
                    </a>
                    <div class="slideContenu">
                        <h1><strong>Blabla </strong>: LOREM </h1>
                        <p>Lorem !</p>
                        <button class="btn">Plus d'infos</button>
                    </div>
                 </div>
              
                <div class="slide" id="slide2">
                    <div class="iconLeft">
                        <i class="fas fa-angle-left"></i>
                    </div>
                    <div class="slideContenu">
                        <h1><strong>BLABLa</strong>: lorem !</h1>
                        <p>lorem !</p>
                        <button class="btn">Plus d'infos</button>
                    </div>
                    <div class="iconRight">
                        <i class="fas fa-angle-right"></i>
                    </div>
                </div>
        </div>

#left:target #slides{
    animation: animationLeft 10s;

}


@keyframes animationLeft {
    0% {
        transform: translateX(0%);
    }
    
   100% {
        transform: translateX(-100%);
        }
  
   }

-
Edité par NicolasLoh 15 mai 2018 à 9:22:16

Salut,

Si tu veux déclencher quelque chose au clic, il faut te tourner vers le JS dans la plupart des cas, il devait surement y en avoir dans les exemples que tu as pris d'ailleurs.

salut,

il me semble que l’attribut :active permet justement de faire çà en css. Non?

Oui tu peux faire ça, le problème va être de cibler ce que tu veux animer (ici un parent du lien à priori), c'est pour ça que je pense que le JS serait mieux.

Bonjour,

OlafYansen c'est juste mais il y a des limites, du coup le JS est plutôt bien adapté, il suffit de changer la classe d'un élément HTML pour déclencher l'animation correspondante au css.

merci à vous d'intervenir alors car je ne connais absolument pas le javascript (et je le regrette bien)

Merci pour vos réponses. En faite c'est pour un des projets du parcourt développeur web junior ou l'on a pas le droit d'utiliser JS.

OlafYansen, j'ai aussi pensé à 'active:' mais ça ne réagis que si on laisse cliqué sur la cible, cela ne déclenche pas de façon définitive.

Ok, je te laisses jeter un oeil sur les sélecteurs css : https://www.w3schools.com/cssref/css_selectors.asp 

ex avec active : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_buttons_animate2  

Sources:  https://www.w3schools.com/howto/howto_css_animate_buttons.asp 

Ensuite :

target peut t'intéresser, on clic sur un lien, exemples :

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_target_tab  

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_target_modal 

-
Edité par pipelette13 15 mai 2018 à 17:22:32

Bonjour  NicolasLoh,

L'utilisation de @keyframes{} (animation) est obligatoire ou tu peux faire une transition ?

Merci Pipelette, j'est déjà vu ses liens, c'est en partie ça qui m'a fait me dire que c'était possible. 

AliasDmc, avec une transition j'ai le même problème.

Le problème doit venir du fait que je veuille que ce soit un élément enfant indirect qui déclenche une transition sur l'élément parent.

Je doit revoir tout mon html pour que ça passe et du coup avant ça, ça me donne des soucies de positionnement a régler pour que l’effet de slider que je voulais puisse fonctionner.

 Merci à tous pour vos conseils. Je vais chercher une autre piste pour avoir un effet similaire. 

Bonjour  NicolasLoh,

Vois du coté du sélecteur "~ "

Si tu as la solution,  je suis preneur.

De toute façon on ne peu pas cibler des éléments parent, donc remonter dans le document.

AliasDmc a écrit:

Bonjour  NicolasLoh,

Vois du coté du sélecteur "~ "

Si tu as la solution,  je suis preneur.

C'est pour sélectionner un voisin direct, aucune utilité dans ce cas donc.

Si tu souhaites faire un slider full CSS, je te conseille de repartir d'une autre base en cherchant un exemple sur Google car le ciblage me parait complexe.