动画总结(一)_css_animate.css

animate.css【高质量的第三方CSS 动画库】

1. 安装

$ npm install animate.css --save

2. 引入

vue-cli创建的项目,main.js中
import 'animate.css'

3. 使用【常规的DOM标签】

<div class="animated infinite fadeIn delay-2s">Example</div>
* animated是必不可少的
* infinite无限循环
* fadeIn动画效果【可有更多的选择,见官网】
* delay-2s动画延迟时间【delay-2s、delay-3s、delay-4s、delay-5s】
* duration动画持续时间【slow、slower、fast、faster】

    * 允许自定义动画属性,覆盖默认的动画属性
    .yourElement {
      animation-duration: 3s;
      animation-delay: 2s;
      animation-iteration-count: infinite;
    }

4. vue中transition组件使用【transition自定义css过渡效果和animate.css结合】

    <transition
        name="custom-classes-transition"
        enter-active-class="animated tada"
        leave-active-class="animated bounceOutRight"
    >
            <p v-if="show">Example</p>
    </transition>

* 可定义的过渡类为，常见的六大类：
* enter-class、enter-active-class、enter-to-class【开始进入、整个过程、进入完成】
* leave-class、leave-active-class、leave-to-class【开始离开、整个过程、离开完成】