Как перебрать все элементы по мере появления?

Question

[wiyod]

Пытаюсь скрестить Vue с Waypoints, но проблема в том, что не получается придумать как перебрать индекс элементов и назначать элементам класс поочередно. Сейчас срабатывает все сразу и все элементы анимируются. https://codepen.io/kodej/pen/VMELwp

Answer 1

[0xD34F]

Пытаетесь управлять состоянием нескольких элементов одной булевой переменной. Так не получится, пусть это будет массив булевых значений - меняем animated: false на animated: Array(6).fill(false).

Этот же массив используем для создания элементов:

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

Получать элементы посредством querySelector не следует - для этого есть ref.

Ну а дальше всё просто - обходим элементы и цепляем к ним Waypoint:

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/