[学习笔记]vue实现页面滚动到某一位置时，div以动画出现

本文介绍了一种使用JavaScript监听页面滚动，并在特定元素进入视口时触发动画的方法。通过为元素添加动态class并结合CSS transition实现平滑过渡效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

实现方法主要分两步骤：

1.监听滚轮，判断div何时出现

2.插入动画效果

首先，在mounted钩子内监听进度条滚动

window.addEventListener("scroll", this.handleScroll);

当进度条滚动后，执行handleScroll事件，然后就可以进行判断了

    handleScroll() {
      this.currentScroll = window.pageYOffset //表示当前滚动的位置

      if (this.currentScroll >= this.$refs.testref.offsetTop - 100) { //当前滚动位置到达testref的时候，显示div（100作为调整用）
        this.testShow = true;
      }
      if (this.currentScroll >= this.$refs.test2ref.offsetTop - 100) {
        this.testShow2 = true;
      }
      if (this.currentScroll >= this.$refs.test3ref.offsetTop - 100) {
        this.testShow3 = true;
        setTimeout(() => {
          this.testShow3 = false;
        }, 400);
      }
    ｝

此时，就可以实现滚动到某div的位置时，该div出现了，但是是突然出现的，很突兀，因此接下来给div加动画。

动画效果我主要用动态class来实现，当滚当到div出现的位置，就给div绑定class，然后通过transition或animation添加动画效果。

比如div从下往上浮现的效果可以用translate+opacity实现

<div :class="{test:true,testenter:testShow}" ref="testref">
  aaa
</div>

      .testenter{
        transform: translateY(0%)!important;  //滚动后的位置
        opacity: 1!important;  //滚动后显现
        transition: all .5s ease;
      }
      .test{  
        transform: translateY(10%);  //滚动前的位置
        opacity: 0;   //滚动前设置透明隐藏
      }

其他动画效果同理，还会有延迟，关键帧等等其他的用法，写出一个好看酷炫的动画效果不容易，但也很有成就感。