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

当用户滚动到其位置时，通过添加设置了css动画属性的类slide，我们可以实现滚动显示效果。下面是一个工作示例：

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>

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

1 个答案: