滚动页面到指定位置动画展示-Vue自定义命令-IntersectionObserver-animate.css

最新推荐文章于 2024-07-30 11:44:55 发布

繁简反转

最新推荐文章于 2024-07-30 11:44:55 发布

阅读量1.1k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_71362881/article/details/127366966

版权

本文介绍如何在Vue项目中利用IntersectionObserver和animate.css实现页面滚动到指定位置时添加动画效果。通过创建观察者，结合Vue自定义指令监听DOM元素，当元素进入视口时触发动画，并在动画结束后移除动画类，确保动画不重复播放。

摘要由CSDN通过智能技术生成

最近在做公司官网 web&H5 页面滚动显示出来给个小动画

之前了解的浏览器标准解决方案（不向下兼容）是 IntersectionObserver，是一个全局的侦听器，

但是每个页面去做一个实例去侦听当前对象也觉得太冗余了吧，并且在vue里面自己去操作dom对象也不是一个很优的选择，于是我们想到了vue自定义指令

我使用的动画是npm上下了个 animate.css, 当然你也可以自己写动画

思路：

1.创建一个观察者

2.制作vue指令，将vue返回的dom进行监听，并且写入暂存的属性值

3.well 为 IntersectionObserver 的回调参数，格式为数组，循环well

4.res 为每个 dom返回的封装对象

5.res.target 为 dom 实例 res.isIntersecting 判断是否相交

6. 添加动画并且settimeout 延时一秒移除动画为了不重复动画，res.target.className.indexOf('animate__animated') < 0 也是为了不重复动画

let observer = new IntersectionObserver(well => {
	well.forEach(res => {
		const className = ` animate__animated ${res.target.attributes.animatename.value}`
		if(res.isIntersecting && res.target.className.indexOf('animate__animated') < 0){
			res.target.clas