Vue中第三方动画库animate.css的使用

安装

通过npm安装：

$ npm install animate.css --save

或者通过yarn安装：

$ yarn add animate.css

引入

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

import 'animate.css'

使用

基本使用方法

引入之后我们就可以配合transition开始使用了。

<transition enter-active-class="fadeIn" leave-active-class="fadeIn">
	<div class="animated faster">testdiv>
transition>

enter-active-class用来指定进入动画。
leave-active-class用来指定消失动画。

自定义播放属性

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

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

通过Javascript动态添加动画

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

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('.my-element', 'bounce')

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

附录

动画库

Class Name
bounce	flash	pulse	rubberBand
shake	headShake	swing	tada
wobble	jello	bounceIn	bounceInDown
bounceInLeft	bounceInRight	bounceInUp	bounceOut
bounceOutDown	bounceOutLeft	bounceOutRight	bounceOutUp
fadeIn	fadeInDown	fadeInDownBig	fadeInLeft
fadeInLeftBig	fadeInRight	fadeInRightBig	fadeInUp
fadeInUpBig	fadeOut	fadeOutDown	fadeOutDownBig
fadeOutLeft	fadeOutLeftBig	fadeOutRight	fadeOutRightBig
fadeOutUp	fadeOutUpBig	flipInX	flipInY
flipOutX	flipOutY	lightSpeedIn	lightSpeedOut
rotateIn	rotateInDownLeft	rotateInDownRight	rotateInUpLeft
rotateInUpRight	rotateOut	rotateOutDownLeft	rotateOutDownRight
rotateOutUpLeft	rotateOutUpRight	hinge	jackInTheBox
rollIn	rollOut	zoomIn	zoomInDown
zoomInLeft	zoomInRight	zoomInUp	zoomOut
zoomOutDown	zoomOutLeft	zoomOutRight	zoomOutUp
slideInDown	slideInLeft	slideInRight	slideInUp
slideOutDown	slideOutLeft	slideOutRight	slideOutUp
heartBeat

以上动画库来源于官方git文档。

可以打开官网animate.css直接查看效果。

常用属性类名（会持续更新）

延迟播放

<div class="animated bounce delay-2s">Examplediv>

Class Name	Delay Time
delay-1s	1s
delay-2s	2s
delay-3s	3s
delay-4s	4s
delay-5s	5s

播放速度

<div class="animated bounce faster">Examplediv>

Class Name	Speed Time
slow	2s
slower	3s
fast	800ms
faster	500m