[学习笔记]vue实现页面滚动到某一位置时,div以动画出现
效果图:实现方法主要分两步骤:1.监听滚轮,判断div何时出现2.插入动画效果首先,在mounted钩子内监听进度条滚动window.addEventListener("scroll", this.handleScroll);当进度条滚动后,执行handleScroll事件,然后就可以进行判断了handleScroll() {this.currentScroll = window.pageYOff
·
效果图:
实现方法主要分两步骤:
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; //滚动前设置透明隐藏
}
其他动画效果同理,还会有延迟,关键帧等等其他的用法,写出一个好看酷炫的动画效果不容易,但也很有成就感。
更多推荐
已为社区贡献2条内容
所有评论(0)