animate.css+wow.js实现页面动画以及滚动到指定位置执行动画

最新推荐文章于 2025-04-25 14:59:12 发布

原创最新推荐文章于 2025-04-25 14:59:12 发布

· 2.1k 阅读

6 ·

版权

文章标签：

#javascript #css #前端 #vue.js

文章介绍了如何安装和引入animate.css与wow.js库，通过Vue.js在项目中使用它们来创建动画效果，特别是淡入效果。通过添加特定数据属性可以控制动画的延迟、持续时间和重复次数，简化了网页动态效果的实现。

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

一、安装animate.css以及wow.js

代码如下（示例）：

	//安装animate.css
	npm install animate.css --save
	//安装wow.js
	npm install wowjs --save

2.引入

代码如下（示例）：

import 'animate.css';
import wow from 'wowjs'
import "wowjs/css/libs/animate.css"
Vue.prototype.$wow = wow

4.使用

注册wow wow可以直接控制animate.css的动画延迟时间，或者动画持续时间等等
data-wow-duration：改变动画持续时间
data-wow-delay：动画开始前的延迟
data-wow-offset：动画开始的距离（与浏览器底部有关）
data-wow-iteration：动画的次数重复
使用看下面

mounted() {
  new this.$wow.WOW().init();
},

4.使用

使用animate.css时看版本，4以上需要添加animate__前缀
添加一个淡入效果animate__animated是每个必须加的类animate__fadeIn是动画名称可以在官网去看示例直接复制就可以animate__是前缀fadeIn是动画名称，官网复制后会自动复制上前缀
使用wow.js设置动画持续时间为2秒加上wow类名实现当页面滑动到某一元素时动画在执行，就不用去监听滚动条等等一系列东西了，直接加上wow类名就可以

<div data-wow-duration="2s" class="wow animate__animated animate__fadeIn"></div>

这样的话一个淡入就动画就添加完成了