How to loop through all elements as they appear?

Question

JavaScript

I'm trying to cross Vue with Waypoints, but the problem is that I can't figure out how to iterate over the index of the elements and assign the class to the elements one by one. Now everything works at once and all elements are animated. https://codepen.io/kodej/pen/VMELwp

Answer 1

You are trying to manage the state of multiple elements of a single boolean variable. This will not work, let it be an array of boolean values ​​- change to . We use the same array to create elements:animated: falseanimated: Array(6).fill(false)

<div
  v-for="n in animated"
  :class="{ animated: n }"
  ...

You shouldn't get elements using querySelector - that's what ref is for .
Well, then everything is simple - we bypass the elements and attach Waypoint to them:

this.$refs.animate.forEach((n, i) => new Waypoint.Inview({
  element: n,
  entered: () => this.$set(this.animated, i, true),
  exited: () => this.$set(this.animated, i, false),
}));

https://jsfiddle.net/fsL9auht/