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

效果图：

实现方法主要分两步骤：

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实现

aaa
 

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

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