Vue transition+animate.css 动画无效

第一步安装animate.css

cnpm install animate.css --save

第二步main.js中引入

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

第三步使用，最开始这样写以后，发现动画无效果，后来发现是animate.css版本问题。默认cnpm install animate.css安装的是最新版本。最新版本的写法已经改变啦~

<transition enter-active-class="bounceInLeft" leave-active-class="bounceOutLeft">
			<div class="banner-left animated" v-show="toShow">
				
			</div>
		</transition>

解决办法,更改class的名称前缀即可哦~每个动画都加上animate_前缀即可。然后重新运行查看发现动画就生效啦

<transition enter-active-class="animate__animated animate__bounceInLeft" leave-active-class="animate__animated animate__bounceOutLeft">
			<div class="banner-left animated" v-show="toShow">
				
			</div>
		</transition>

详细文档可去官网查看哦~animate.css官网