码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-07-13 11:45:39      阅读:490      评论:0      收藏:0      [点我收藏+]

标签: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">
        <!-- 需求:点击按钮,让 h3 显示,再点击,让 h3 隐藏 -->
        <transition enter-active-class="animated bounceIn" 
        leave-active-class="animated bounceOut"
        :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>
动画范例

 

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

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

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!