vue中使用animate.css，数据改变并运行动效

一、安装

在命令行中执行：

npm install animate.css --save

二、引入

import animated from 'animate.css' // 引入animate.css

Vue.use(animated)

三、一般使用

1. 新版本：

   <div class="animate__animated animate__bounceInLeft"></div>
   

2. 旧版本：

   <div class="animated bounceInDown"></div>
   

四、随数据改变动态生效

<template>
	<div id="animateBox" class="animate__animated"></div>
</template>
export default {
	data () {
    	return {
    		value: ''	
    	}
    },
    watch: {
	    // 监听value发生变化，动效生效
	    value (newVal, oldVal) {
	    	const ele = document.getElementById('animateBox') // 动效所在元素的DOM
	        ele.className = ele.className.replace(' animate__bounceInLeft', '') // 先删除动效类名
	        ele.className += ' animate__bounceInLeft' // 然后再增加动效类名
	    }
	},
}