1

I am trying to animate all LI in a sequence, but the code is animating all LI at once.

I could not find a useful reply anywhere, I know how to do this in Jquery, but something does not add up here.

I have tried to add the Timeout to the eventhandler and the called function, both approaches do not work.

This is the function

function changeLi() {
  setTimeout(function() {
    [].forEach.call(li, function(li) {
      li.style.transform = "translateX(200px)";
    }, 900);
  });
}

Link to codepen:

http://codepen.io/damianocel/pen/PzYXmv

I have tried to add stopPropagation/preventDefault to the call, but that did not help either.

André Junges
  • 5,297
  • 3
  • 34
  • 48
damiano celent
  • 721
  • 6
  • 12
  • Your brace matching is messed up. Please fix it and properly indent your code. – Bergi May 26 '16 at 19:32
  • You appear to have a fundamental misunderstanding of [how setTimeout works](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout). Also [stopPropagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) and [preventDefault](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault), both of which apply only to events. – Hamms May 26 '16 at 19:34
  • You're using `setTimeout` as if it worked like a `sleep`. See [here](Python while loop conversion to Javascript) for solutions. – Bergi May 26 '16 at 19:34
  • `setTimeout()` will only control when an animation starts, when setting the `style.transform`. The animation itself will behave and complete independently of the timeouts. – [Is there a callback on completion of a CSS3 animation?](http://stackoverflow.com/questions/6186454/is-there-a-callback-on-completion-of-a-css3-animation) – Jonathan Lonowski May 26 '16 at 19:38
  • @hamms I have tried the stopPropagation because the whole UL is animated. The next issue is with the "this" scope, Jquery takes care of that, but here, clearly something is not right. – damiano celent May 26 '16 at 19:39

1 Answers1

5

There are several issues with your code. First, the 900 is not a parameter of your setTimeout, but rather of the forEach.call. That appears to be just an error.

Secondly, even if the above is fixed, your code would simple set a single timeout for 900ms in the future to then iterate over all of your li's in the list and transform them at once. What I believe you really want to do is loop over all your items and define a timeout to run in the future where each is run a certain amount of time from the previous. Since forEach provides an index, you can use a static ms count and multiple it by the current index of you li list to animate further out from right now.

I believe you are actually looking for something like this, which loops over your li list, and sets a transform to occur on each item 100ms from the previous:

function changeLi() {
  [].forEach.call(li, function(li, i) {
    setTimeout(function() {
      li.style.transform = "translateX(200px)";
    }, 100 * i);
  });
}
rgthree
  • 7,217
  • 17
  • 21