Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre confirmé
    Démarrer une transition ou une animation CSS lors d'un événement JS
    Bonjour.
    Question toute bête mais à laquelle je ne trouve pas de réponse sur le web :
    Comment faire démarrer une transition ou une animation CSS par un événement JS, par exemple au clic sur un bouton.
    Merci.

  2. #2
    Membre habitué
    Salut

    Par un click, alors ça veut dire que c'est du js qui va lancer l'anim css, y a que ça.
    Style une boucle d'animation et tu change à l'intérieur de la boucle le css d'un élément à animer .

    Ou alors j'ai pas compris ton probleme ?

  3. #3
    Membre confirmé
    Citation Envoyé par amateurprg Voir le message
    Ou alors j'ai pas compris ton probleme ?
    J'ai du mal m'exprimer.

    Je veux un truc dans le genre <button onclick="demarrerAnim()">Démarrer l'animation</button> et
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    function demarrerAnim() {
      // quelque chose, mais quoi, qui démarre la transition ou l'animation déclarée dans le CSS 
    }

  4. #4
    Membre habitué
    Tu dois mettre en pause ton animation.

    animation-play-state: paused;

    Puis la lancer avec :

    animation-play-state: running;

    Tu peux en démarrer/pauser plusieurs :

    animation-play-state: paused, running, running;

  5. #5
    Membre confirmé
    Citation Envoyé par amateurprg Voir le message
    Puis la lancer avec : animation-play-state: running;
    Ok, une instruction du genre :

    monElt.style.animationPlayState = 'running' ?

    Merci, super, j'm'en vas essayer ça !

  6. #6
    Membre confirmé
    Citation Envoyé par amateurprg Voir le message
    Tu dois mettre en pause ton animation.
    Ta façon de faire fonctionne bien pour une animation.
    Serais-tu comment faire avec une transition des fois ? (Ouaip, je sais, je suis exigeant).
    Merci.

  7. #7
    Invité
    Invité(e)
    Bonjour,

    Merci de montrer ton code.

  8. #8
    Membre confirmé
    Citation Envoyé par jreaux62 Voir le message

    Merci de montrer ton code
    Je n'ai pas de code, c'est une question générale.
    Je peux cependant rédiger un exemple
    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    <!DOCTYPE HTML>
    <head>
    <meta charset="UTF-8">
    <style>
    #division {
        max-height: 0px;
        transition: all 1s;
        overflow: hidden;
    }
    #division:hover {
        max-height: 200px;
    }
    </style>
    </head>
    <body>
    <input type=button onclick="aider()" value="Aide">
    <div id=division>
        Texte qui s'allonge<br>
        Texte qui s'allonge<br>
        Texte qui s'allonge<br>
        Texte qui s'allonge<br>
    </div>
     
    <script>
        // mon div étant caché, il me faut le dérouler d'une autre façon qu'au survol
        function aider() {
            // je fais comme si l'on passait la souris sur la div
        }
    </script>


    Merci.

  9. #9
    Invité
    Invité(e)
    OK.

    Dans le cas présent, une solution simple est d'ajouter/supprimer une classe CSS :
    Code css :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    #division {
      max-height: 0;
      transition: all 0.5s;
      overflow: hidden;
    }
    #division.over {
      max-height: 100px;
      overflow: auto;
    }

    Code JavaScript :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    "use strict";
    function aider() {
      document.querySelector('#division').classList.toggle('over');
    }


  10. #10
    Membre habitué
    N'oublie pas quand tu fera ton code original de mettre des guillemets aux noms des id des elements.
    Ne fait pas comme là, par exemple :

  11. #11
    Invité
    Invité(e)
    Tant a qu'à (bien) faire, si on veut pouvoir appliquer l'animation sur plusieurs éléments :

    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
      <div>
        <input type="button" onclick="aider(this)" value="Aide 1" />
        <div class="aide">
          Texte 1 qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
        </div>  
      </div>
     
      <div>
        <input type="button" onclick="aider(this)" value="Aide 2" />
        <div class="aide">
          Texte 2 qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
          Texte qui s'allonge<br>
        </div>  
      </div>

    Code css :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .aide {
      max-height: 0;
      transition: all 0.5s;
      overflow: hidden;
    }
    .aide.over {
      max-height: 100px;
      overflow: auto;
      border:1px dashed #ccc;
    }

    Code JavaScript :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    "use strict";
    function aider(elt) {
      console.log( elt.nextElementSibling );
      elt.nextElementSibling.classList.toggle('over');
    }


    Ou encore :
    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
        <input type="button" class="btnAide" value="Aide 1" />
    ...
        <input type="button" class="btnAide" value="Aide 2" />
    ...

    Code JavaScript :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    "use strict";
    const btnAides = document.querySelectorAll('.btnAide');
    btnAides.forEach( function(btnAide){
      btnAide.addEventListener('click', function(){
        this.nextElementSibling.classList.toggle('over');
      });
    });


    Cela dit, tu peux aussi faire une recherche : "tooltip CSS"


    Pour afficher l'infobulle sur le "click" et plus sur le :hover, il suffit de :
    1- remplacer dans le script CSS :hover par .over
    2- Ajouter le script JS :
    Code JavaScript :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    "use strict";
    const tooltips = document.querySelectorAll('.tooltip');
    tooltips.forEach( function(tooltip){
      tooltip.addEventListener('click', function(event){
        event.preventDefault(); // empêche l'évènement par défaut (ici, lien <a> : href désactivé)
        this.classList.toggle('over'); // ajoute ou supprime la class "over"
      });
    });


  12. #12
    Membre habitué
    Salut
    Chui allé sur la démo, et quand je click sur un des liens à cliquer, l'infobulle apparait mais ça fait remonter la page de la hauteur de l'infobulle, donc je crois qu'il faut mettre l'infobulle en "absolute" non ?

  13. #13
    Modérateur

    Bonjour,
    il faut annuler l'action par défaut qui est réalisée au click sur un lien à savoir suivre le lien donc dans le cas présent remonter en haut de page.

    Cela se fait en utilisant la méthode Event..preventDefault().
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    const tooltips = document.querySelectorAll('.tooltip');
    tooltips.forEach(function(tooltip) {
      tooltip.addEventListener('click', function(ev) {  // récupération en paramètre de l'événement
        // annule action par défaut
        ev.preventDefault();
        this.classList.toggle('over');
      });
    });


    [EDIT]
    Je rajoutes cette page, que je n'ai jamais pris le temps de finir, comme d'hab : Animation CSS simple

  14. #14
    Invité
    Invité(e)
    Ah oui, je n'avais pas vu que c'était des liens <a>.

    Du coup, je les ai remplacés par de simples <span>, et ça fonctionne aussi bien : https://codepen.io/jreaux62/pen/MWWVvOj
    le event.preventDefault(); n'est plus nécessaire

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    "use strict";
    const tooltips = document.querySelectorAll('.tooltip');
    tooltips.forEach( function(tooltip){
      tooltip.addEventListener('click', function(){
        this.classList.toggle('over');
      });
      tooltip.addEventListener('mouseout', function(){
        let ceci = this;
        window.setTimeout( function(){
          ceci.classList.remove('over');
        } , 1000); // on masque après 1 sec.
      });
    });

  15. #15
    Modérateur

    Tu aurais également pu te passer de JavaScript en utilisant le sélecteur .tooltip:focus span, sur tes <a> avec l'avantage que la bulle ne reste pas coincée mais avec le désagrément de la remontée dans bien des cas.

    On voit que pour ce cas <nobody> is perfect </nobody> !

  16. #16
    Invité
    Invité(e)
    Oui, mais dans le script JS, je peux remplacer 'click' par 'dblclick' si je veux !
    Et là, le CSS est KO...

    D'autre part, ce serait dommage de "se passer de JavaScript"... dans le forum JavaScript !

  17. #17
    Membre confirmé
    Merci à tous.

    @amateurprg
    N'oublie pas quand tu fera ton code original de mettre des guillemets aux noms des id
    Dans quel intérêt ?

  18. #18
    Membre habitué
    Comment ça ? Y a pas d'intérêt ?

    Moi j'ai toujours fait comme ça, c'est ce que j'ai appris sur le net depuis toujours :/
    Pour moi c'est comme si tu me disais pourquoi fermer une balise (oui bon y a des balises qui ferment pas )

  19. #19
    Invité
    Invité(e)
    Bonjour,

    Citation Envoyé par amateurprg Voir le message
    Moi j'ai toujours fait comme ça...
    Ce n'est pas une réponse très convaincante...

    L'intérêt des double-quotes est que :
    • c'est la convention de syntaxe pour les attributs des éléments (X)HTML
      Les balises HTML respectent une syntaxe simple et stricte :
      • Un chevron ouvrant (<)
      • Le nom de la balise
      • Des attributs (optionnels). Un espace, suivi du nom de l'attribut, d'un signe égal (=) et d'une valeur entre doubles quotes ("").
      • Un chevron fermant (>)

    • sans double-quotes, plusieurs valeurs séparées par des espaces ne seraient pas correctement lues *

    * MAUVAIS :
    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    <input class=blue left value=cliquer ici />

    BON :
    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    <input class="blue left" value="cliquer ici" />


    ...oui bon y a des balises qui ferment pas...
    En fait, si. Ca s'appelle des balises auto-fermantes (ou balises vides) :
    • <br />
    • <hr />
    • <img ... />
    • <input ... />
    • ...

    Le "/" final n'est pas obligatoire en HTML, mais il l'est en XHTML.

  20. #20
    Membre confirmé
    Citation Envoyé par amateurprg Voir le message
    Comment ça ? Y a pas d'intérêt ?
    Bonjour.
    Il peut y avoir, si l'attribut est composé de caractères dits spéciaux, comme l'espace.

    Dans le cas que tu as commenté, <div id=division> est parfaitement correct. Aucun navigateur ni le validateur du W3C ne tique.
    J'ajoute que les quotes simples sont aussi tout à fait admises pour des attributs composés du genre <div class='c1 c2'>
    Comme l'a indiqué jreaux62, les doubles-quotes sont une CONVENTION, pas une obligation.

    D'où ma question : pourquoi m'obliger à charger systématiquement le code de quotes si leur absence ne provoque aucun problème, même pas de validation, que je développe en solo et que de plus mon éditeur de code me permet de visualiser plus facilement les attributs hors quotes ?

    Citation Envoyé par jreaux62 Voir le message

    Le "/" final n'est pas obligatoire en HTML, mais il l'est en XHTML.
    Feu le XHTML ;-)
    (un truc qui permettait aux pinailleurs de se sentir exister !)

    Tapez pas !

###raw>template_hook.ano_emploi###