2
votes

animer la hauteur des div l'une après l'autre onload javascript

J'ai réussi à faire fonctionner le début de mon animation et maintenant je veux que le reste s'anime avec un léger retard après chaque animation de hauteur div et ses problèmes. J'ai essayé d'utiliser getElementsByClassName et cela n'a pas fonctionné.

J'ai publié mes progrès jusqu'à présent ici dans codepen.

J'ai essayé avec getElementsByClassName
J'ai essayé d'utiliser le .container div .

<html>

<head>
  <script>
    window.onload = function() {
      let box = document.getElementById('box')
      box.style.height = "100vh";
    }
  </script>
</head>

<body>
  <div class="container" id="container">
    <div class="box" id="box">
      box1
    </div>
    <div class="box" id="box2">
      box2
    </div>
    <div class="box" id="box3">
      box3
    </div>
    <div class="box" id="box4">
      box1
    </div>
  </div>

</body>

</html>

Je veux que chaque élément individuel s'anime avec des délais définis pour chacun.

javascript animation onload

0 commentaires

3 Réponses :

1
votes

Vous pouvez utiliser l'événement transitionend de la première box , pour démarrer la transition de box2 :

window.onload = function () {
  const box = document.getElementById('box');

  setTimeout(() => {
    document.getElementById('box2').style.height = "100vh";
  }, 200);

  box.style.height = "100vh";
}

Si vous souhaitez démarrer la 2ème animation avant la 1ère terminée, vous pouvez utiliser la fonction setTimeout avec le délai souhaité:

window.onload = function () {
  const box = document.getElementById('box');

  box.addEventListener("transitionend", () => {
    document.getElementById('box2').style.height = "100vh";
  }, {once: true});

  box.style.height = "100vh";
}

1 commentaires

Impressionnant! merci beaucoup cela a très bien fonctionné. Existe-t-il un moyen de définir manuellement le délai pour que l'animation démarre un peu plus rapidement?

0
votes

Essayez ceci ..

window.onload = function () {
  var box = document.getElementsByClassName("box");
  for(var i = 0; i < box.length; i++)
  {
     box[i].style.height = "100vh";
  }
}

0 commentaires

0
votes

Voilà. Un code pour animer chacune de vos boîtes l'une après l'autre.

Remarquez que j'ai d'abord dû convertir votre liste de nœuds en tableau, puis inverser le tableau. Ceci afin de pouvoir extraire des éléments du tableau et utiliser la longueur du tableau pour terminer la fonction récursive animateBoxes () .

J'ai utilisé la fonction setTimeout () pour exécuter la fonction récursive 1 seconde à la fois. Vous pouvez modifier le paramètre de temps selon vos besoins.

Le principal avantage de cette méthode est qu'elle peut automatiquement animer n'importe quel nombre de cases.

<div class="container" id="container"> 
    <div class="box" id="box"> box1 </div> 
    <div class="box" id="box2"> box2 </div> 
    <div class="box" id="box3"> box3 </div> 
    <div class="box" id="box4"> box4 </div> 
</div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    width: 100%;
    height: 100vh;
    background: green;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

#box, #box2, #box3, #box4 {
    width: 100%;
    height: 0;
    position: relative;
    top: 0;
    transition: 1s;
}

#box {
    background: red;
}

#box2 {
    background: purple;
}

#box3 {
    background: orange;
}

#box4 {
    background: yellow;
}

window.onload = function () { 
    let boxes = [].slice.call(document.querySelectorAll(".box")).reverse();
    animateBoxes(boxes);

    function animateBoxes(boxes) {
        if(boxes.length) {
            setTimeout(function() {
                boxes.pop().style.height = "100vh";
                animateBoxes(boxes);
            }, 1000);
        }
    }
}

0 commentaires