在 Vue 上到达 div 时添加动画效果或类

Question

我在Vue做一个项目，需要当用户滚动页面到达指定的div时，在那个div中添加一个效果或者一个类，类似于ScrollReveal

有人在 Vue 中做过类似的事情吗？

这是我拥有的 css 代码，我需要它在到达 div 时运行

h2上的title效果必须在屏幕显示时执行。

@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动画属性，当用户滚动到它的位置时。下面是一个工作示例：

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>