Добавляйте анимационные эффекты или классы при поступлении в div на Vue

Question

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

Кто-нибудь когда-нибудь делал что-то подобное в Vue?

Вот мой код css, и мне нужно, чтобы он работал по прибытии в div

Эффект заголовка на h2 должен бытьвыполняется, когда он отображается на экране.

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

h1 {
  animation: 1s ease-out 0s 1 slideInFromLeft;
}

h2 {
  animation: 1s ease-out 0s 1 slideInFromLeft;
}

<h1>
Hello World!
</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2>
World Hello!
</h2>

Answer 1

Мы можем добиться прокрутки, чтобы выявить эффект, добавив класс slide, у которого установлено свойство css animation, когда пользователь прокручивает его позицию.Ниже приведен рабочий пример:

new Vue({
  data: {
    el: document.getElementById('target-element')
  },
  methods: {
    isScrolledIntoView(el) {
      var rect = el.getBoundingClientRect();
      var elemTop = rect.top;
      var elemBottom = rect.bottom;
      isVisible = elemTop < window.innerHeight && elemBottom >= 0;
      return isVisible;
    },
    handleScroll() {
      /* if scrolled into view */
      if(this.isScrolledIntoView(this.el))
        this.el.classList.add('slide');
    }
  },
  created() {
    window.addEventListener('scroll', this.handleScroll);
  },
});

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.slide {
  animation: slideInFromLeft 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<h1 class="slide">
Hello World!
</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 id="target-element">
World Hello!
</h2>