Анимация элемента списка Javascript - PullRequest
Новая
       16

Анимация элемента списка Javascript

0 голосов
/ 29 октября 2018

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

Animation I want

Что на самом деле означает, что цикл выполняется полностью, сообщения console.log выводятся поэтапно, но все классы удаляются одновременно после завершения цикла. Как я могу изменить это поведение? Зачем добавлять сообщения console.log, но функциональность classList.remove не выполняется одновременно?

Вот мой код ... 

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}


/**/
function showListItems() {
  var listItems = document.querySelector('.idList');
  var n = 20;
  var c = 0;
  var itemArray = new Array();
  for (var i = 0; i < listItems.children.length; i++) {
    var item = listItems.children[i];
    if (item.classList && item.classList.contains('idList__item--hide')) {
      console.log('Item: ', item);
      itemArray[c] = item;
      c++;
    }
  }
  console.log('Item Array: ', itemArray);
  itemArray.forEach(function(el, index) {
    sleep(n);
    el.classList.remove('idList__item--hide');
    console.log("EL[" + index + "]: ", el);
  });
}

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

Спасибо.

Ответы [ 3 ]

0 голосов
/ 29 октября 2018

Это может быть плохим способом, но это должно решить вашу проблему.

Вы можете использовать setTimeout () в forEach и использовать index для изменения параметра времени, например: 

itemArray.forEach(function(el, index) {
    setTimeout(function(){
         el.classList.remove('idList__item--hide')
    },500*(index+1)) 
});
0 голосов
/ 29 октября 2018

Браузер не обновляется до завершения работы JavaScript. Ваш сценарий не возвращает управление браузеру во время сна, поэтому браузер не может обновиться. Это именно то, для чего setTimeout.

Изменение 

itemArray.forEach(function(el, index) {
    sleep(n);
    el.classList.remove('idList__item--hide');
    console.log("EL[" + index + "]: ", el);
});

до 

itemArray.forEach(function(el, index) {
    const ms = n * (index + 1);
    setTimeout(function() {
        el.classList.remove('idList__item--hide');
        console.log("EL[" + index + "]: ", el);
    }, ms);
});

Мы заранее планируем все remove звонки, поэтому умножаем n на index + 1.

И если вам интересно, вот код, который я использовал для проверки sleep против setTimeout. https://codepen.io/rockysims/pen/jeJggZ

0 голосов
/ 29 октября 2018

Я использовал функции Jquery each и setTimeout для создания цепочек анимации. 

$( "li" ).each(function( index ) {
    var listItem = $( this );
    setTimeout(function() {
      listItem.animate({
      opacity: 1
    }, 500); 
    }, (index + 1) * 500);
    
});
ul {
  padding : 20px;
}
ul li {
  list-style : none;
  height : 50px;
  background-color : lightgreen;
  margin : 20px;
  opacity : 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Hello world 1</li>
<li>Hello world 2</li>
<li>Hello world 3</li>
<li>Hello world 4</li>
</ul>
...