Анимация высоты div одна за другой onavascript javascript

Question

Анимация высоты div одна за другой onavascript javascript

Мне удалось начать работу над анимацией, и теперь я хочу, чтобы остальные анимировались с небольшой задержкой после каждого div Высота анимации и ее вызывающие проблемы. Я пытался использовать getElementsByClassName и это не сработало.

Я опубликовал свой прогресс здесь, в codepen.

Пробовал с помощью getElementsByClassName
Попробовал с помощью .containerdiv,

<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>

Я хочу, чтобы каждый отдельный элемент оживлялся с задержками, установленными для каждого.

2

javascript animation onload

Источник

user8393404 25 авг '19 в 15:39

3 ответа

Другие вопросы по тегам javascript animation onload

user186822 25 авг '19 в 15:52 2019-08-25 15:52 · Answer 1 · 2019-08-25 15:52

Вы можете использовать transitionend событие первого box, чтобы начать переход box2:

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

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

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

Если вы хотите запустить 2-ю анимацию до завершения 1-й, вы можете использовать setTimeout функция с желаемой задержкой:

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

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

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

user11844048 25 авг '19 в 16:01 2019-08-25 16:01 · Answer 2 · 2019-08-25 16:01

Попробуй это..

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

0

Источник

user11844048 25 авг '19 в 16:01

user9272040 25 авг '19 в 18:53 2019-08-25 18:53 · Answer 3 · 2019-08-25 18:53

Там у вас есть это. Код для анимации каждой из ваших коробок одна за другой.

Обратите внимание, что мне пришлось сначала преобразовать ваш список узлов в массив, а затем перевернуть массив. Это сделано для того, чтобы можно было извлекать элементы из массива и использовать длину массива для завершения рекурсивной функции. animateBoxes(),

Я использовал setTimeout() функция для выполнения рекурсивной функции 1 секунда за раз. Вы можете изменить параметр времени в соответствии с вашими потребностями.

Основным преимуществом этого метода является то, что он может автоматически анимировать любое количество блоков.

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);
        }
    }
}

* {
    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;
}

<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>