关于Vue引⽤animate.css动画不起作⽤的问题（animateV3与V4版本使
⽤⽅。。。
1. Vue 官⽹引⽤的是 animate.css 3.5 版本
<link href="cdn.jsdelivr/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
2. 不能引⽤ animate.css 最新版本例如：(4.0)
<link rel="stylesheet" href="cdnjs.cloudflare/ajax/libs/animate.css/4.0.0/animate.min.css"/>
3. vue 和 animate.css 版本兼容性问题导致动画不起作⽤
<body>
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<!-- 需求：点击按钮，让 h3 显⽰，再点击，让 h3 隐藏 -->
<transition enter-active-class="animated bounceIn"
leave-active-class="animated bounceOut"
css最新
:duration="200">
<h3 v-show="flag">这是⼀个h3</h3>
</transition>
<!-- <transition enter-active-class="bounceIn" leave-active-class="bounceOut">
<h3 v-show="flag" class="animated">这是⼀个h3</h3>
</transition> -->
</div>
<script>
/
/ 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: "#app",
data: {
flag: false
},
methods: {
},
})
</script>
</body>
动画范例
4. 官⽹解决办法
从v3.x及以下版本迁移
Animate.css v4进⾏了⼀些改进，改进了动画，并添加了新动画，因此值得进⾏升级。但这也带来了重⼤变化：我们为所有Animate.css类添加了前缀-默认为animate__-因此⽆法直接迁移。但是不要害怕！尽管默认版本animate.min.css带有animate__前缀，我们也提供了animatepat.css⽂件，该⽂件根本没有前缀，就像以前的版本（3.x及更低版本）⼀样。
如果您使⽤捆绑器，则只需更新导⼊：
从：
导⼊ 'animate.min.css' ;
⾄
导⼊ 'animatepat.css' ;
请注意，根据项⽬的配置，这可能会有所变化。
如果使⽤CDN，只需更新HTML上的链接：
从：
< head >
< link
rel =“ stylesheet ”
href =“ cdnjs.cloudflare/ajax/libs/animate.css/3.7.2/animate.min.css ”
/>
</ head >
⾄
< head >
< link
rel =“ stylesheet ”
href =“ cdnjs.cloudflare/ajax/libs/animate.css/4.0.0/animatepat.css ”
/>
</ head >
对于新项⽬，强烈建议使⽤默认的前缀版本，因为这将确保您⼏乎不会有与项⽬冲突的类。此外，在更⾼版本中，我们可能决定终⽌该animatepat.css⽂件。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。