vue项目项目使用animate.css动画效果_vue animate.css

animate.css使用

安装

npm i animate.css
1

引入

在main.ts文件中引入

// 引入动画库
import "animate.css"
1
2

使用

注意安装animate.css版本，我这里用的v4.1.1 ，animate__animated是基类必须使用的(因为安装的animate版本是4.x，使用时要注意对应的所有类名都以animate__开头，并且还要配合animate__animated一起使用！)

//注意这里必须加animate__animated基类
<div class="animate__animated animate__fadeInDown"></div>
1
2

在vue中使用过渡&动画里的内容

结合了vue中过渡&动画里的内容，自定义过渡 class 类名。
可以通过以下 attribute 来自定义过渡类名：

• enter-from-class
• enter-active-class
• enter-to-class
• leave-from-class
• leave-active-class
• leave-to-class

  <div
    enter-active-class="animate__animated animate__bounce"
    leave-active-class="animate__animated animate__bounce"
  >
    将要添加动画效果的dom元素
  </div>
1
2
3
4
5
6

---

animate.css官网 具体参数参考这里

---

wow.js:滚动时显示动画

有时需要搭配 wow.js实现动画

安装

npm install wow.js

npm i animate.css

1
2
3
4

引入

在main.ts文件中引入

// 引入动画库
import "animate.css"
1
2

全局引入

在main.ts 或者App.vue中初始化

import WOW from 'wow.js';

  let wow = new WOW({
  boxClass: 'wow', // animated element css class (default is wow)
  animateClass: 'animated', // animation css class (default is animated)
  offset: 0, // distance to the element when triggering the animation (default is 0)
  mobile: true, // trigger animations on mobile devices (default is true)
  live: true, // act on asynchronously loaded content (default is true)
  callback: function (box: any) {
    // the callback is fired every time an animation is started
    // the argument that is passed in is the DOM node being animated
  },
  scrollContainer: null, // optional scroll container selector, otherwise use window
  });
wow.init();


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

局部引入

在需要的组件中引用wow.js

import WOW from 'wow.js';

1
2

在生命周期里中初始化wow.js

  let wow = new WOW({
  boxClass: 'wow', // animated element css class (default is wow)
  animateClass: 'animated', // animation css class (default is animated)
  offset: 0, // distance to the element when triggering the animation (default is 0)
  mobile: true, // trigger animations on mobile devices (default is true)
  live: true, // act on asynchronously loaded content (default is true)
  callback: function (box: any) {
    // the callback is fired every time an animation is started
    // the argument that is passed in is the DOM node being animated
  },
  scrollContainer: null, // optional scroll container selector, otherwise use window
  });
 wow.init();


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17