在vue中实现页面滚动(停止滚动)的动画效果总结
1、运用到的技术:监听滚动事件:window.addEventListener('scroll', function(handleScroll));动画库:animate.css2、总结:滚动事件触发时,记录滚动条的垂直位置:document.documentElement.scrollTop||document.body.scrollTop滚动停止触发思路:在滚动触发时,...
·
1、运用到的技术:
- 监听滚动事件:window.addEventListener('scroll', function(handleScroll));
- 动画库:animate.css
2、总结:
- 滚动事件触发时,记录滚动条的垂直位置:document.documentElement.scrollTop || document.body.scrollTop
- 滚动停止触发思路:在滚动触发时,写一个新函数ScrollEnd(做延迟setTimeout),记录新的scrollTop值,然后比较这2个scrollTop值,如果相等的话,说明停止了滚动
- 注意:每次滚动的时候,需要先清除定时器,因为滚动的时候,一直再清定时器,不会执行新函数ScrollEnd,只有当停止滚动的时候才执行该函数。
- 动画:首先获取元素element = document.getElemenidtById('id'),然后添加元素动画效果element.classList.add('animated', 'fadeOutRight'),fadeOutRight:右淡出 删除元素动画效果:element.classList.remove('animated', 'fadeOutRight')
- 动画官方网址:https://daneden.github.io/animate.css/
3、接下来给出源码
1、
data() {
return {
scrollT: '',
scrollStops: '',
timer: ''
}
}
2、
mounted() {
//滚动条监听
window.addEventListener('scroll', this.handleScroll);
}
3、
methods: {
handleScroll() {
clearTimeout(this.timer); //清除定時器
this.timer = setTimeout(this.ScrollEnd, 500);
this.scrollT = document.documentElement.scrollTop || document.body.scrollTop;
//滚动中的动画
const element = document.getElementById('fixbox');
element.classList.add('animated', 'fadeOutRight') //滑动时,右淡出
},
ScrollEnd() {
this.stopscroll = document.documentElement.scrollTop || document.body.scrollTop; //停止后的scrolltop
if (this.stopscroll == this.scrollT) {
const el = document.getElementById('fixbox');
el.classList.remove('fadeOutRight'); //停止滑动时,删除向右淡出
}
}
}
更多推荐
已为社区贡献15条内容
所有评论(0)