在 Vue 项目中，使用第三方动画库 animate.css 的步骤 :

这篇文章是对于，在 Vue 项目中，使用第 三方动画库 animate.css 步骤的一个总结:

---

•  Animate.css 开源 CSS 动画库 :

   Animate.css 特点：

---

1. 开源免费 ：基于 MIT 开源协议，被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。

2. 使用简单 : 只有一个 CSS 文件，引入后以类的方式进行调用，如果使用 jquery，则不影响原有程序架构。

3. 文件小，响应快 : 体积小巧，只有 几十k 的大小，响应速度非常快。

• Animate.css 在 Vue 项目中 安装 ：

通过 npm 安装 :

npm install animate.css --save;

或者通过 yarn 安装 :

yarn add animate.css

• Animate.css 引入 Vue 项目中 ：

在 main.js 文件中引入 animate.css :

import animated from 'animate.css'
Vue.use(animated)

• Animate.css 在 Vue 项目中 使用 :

当我们在 Vue 项目中引入 animate.css 后，开始配合 transition 开始其使用 :

    



//========================================================================
我是淡入效果

解析 : enter-active-class 指定进入动画；leave-active-class 指定消失动画。

• 自定义 播放属性 ：

可以通过 设定的类名，对播放属性进行控制 :

.yourElement {
  animation-duration: 3s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

• 通过 JS 动态的 添加 动画 :

在这里，官方提供了一个动态添加和移除动画的方法 ：

function animateCSS(element, animationName, callback) {
    const node = document.querySelector(element)
    node.classList.add('animated', animationName)

    function handleAnimationEnd() {
        node.classList.remove('animated', animationName)
        node.removeEventListener('animationend', handleAnimationEnd)

        if (typeof callback === 'function') callback()
    }
    node.addEventListener('animationend', handleAnimationEnd)
}

通过调用 animateCSS() 这个方法，可以实现对动画效果的动态添加，和动画完毕后的监听回调 ：

animateCSS('.my-element', 'bounce')
// or
animateCSS('.my-element', 'bounce', function() {
  // Do something after animation
})

 

• 播放延迟 和 播放速度 类名 :

//延迟播放 :
//类名 delay-1s ---> 延迟1s
//类名 delay-2s ---> 延迟2s
//类名 delay-3s ---> 延迟3s
//类名 delay-4s ---> 延迟4s
//类名 delay-5s ---> 延迟5s
Example

//播放速度 ：
//类名 ：slow    ---> 播放速度为 2s
//类名 ：slower  ---> 播放速度为 3s
//类名 ：fast    ---> 播放速度为 800ms
//类名 ：faster  ---> 播放速度为 500ms
Example

---

• 更多动画库效果，可以打开 animate.css 官网 查看 ；