关于 Vue 引用 animate.css 动画不起作用的问题（版本兼容性）神坑

2021-01-21 19:13

阅读：750

标签：type 创建 isp cdn vue flag close 兼容 view

1. Vue 官网引用的是 animate.css 3.5 版本

link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

2. 不能引用 animate.css 最新版本例如：(4.0)

link rel="stylesheet" href="https://cdnjs.cloudflare.com/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">
        
        transition enter-active-class="animated bounceIn" 
        leave-active-class="animated bounceOut"
        :duration="200">
            h3 v-show="flag">这是一个h3h3>
        transition>

        
    div>
    script>
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
            el: "#app",
            data: {
                flag: false
            },
            methods: {

            },
        })
    script>
body>

动画范例

关于 Vue 引用 animate.css 动画不起作用的问题（版本兼容性）神坑

标签：type 创建 isp cdn vue flag close 兼容 view

原文地址：https://www.cnblogs.com/cntian/p/13292041.html

上一篇：CSS实现垂直居中的常用方法

下一篇：HTTP Debugger Pro 9.10激活

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：关于 Vue 引用 animate.css 动画不起作用的问题（版本兼容性）神坑
文章链接：http://soscw.com/index.php/essay/45101.html

亲，登录后才可以留言！

关于 Vue 引用 animate.css 动画不起作用的问题（版本兼容性）神坑

评论

热门文章

推荐文章

最新文章

置顶文章

关于 Vue 引用 animate.css 动画 不起作用的问题（版本兼容性）神坑

评论

热门文章

推荐文章

最新文章

置顶文章

关于 Vue 引用 animate.css 动画不起作用的问题（版本兼容性）神坑