前端应用_Vue_使用第三方 animate.css 实现动

最新推荐文章于 2022-06-04 23:15:50 发布

上海_彭彭

最新推荐文章于 2022-06-04 23:15:50 发布

阅读量158

点赞数 1

分类专栏： Vue.js 文章标签： vue animate 实现动画

本文链接：https://blog.csdn.net/qq_34979346/article/details/99220005

版权

Vue.js 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

前面是vue 自带的，需要定义style 非常的烦，怎么解决呢，用第三方库就行了，他已经定义好了css 样式，拿来直接用就行了。

例子如下：

  <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duratio="300">
        
            <h3 v-if="flag" class="animated">动画类效果演示</h3>
        </transition>

解析下：

enter-active-class 相当于 vue 的 enter
leave-active-class 相当于 vue 的leave 封装
duration 设置时间的
class=“animated” 设置基本类，都是在这个继承的。
拿到全部的代码可以尝试下，感受下效果：

<!DOCTYPE html>
<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" >
            
<link href="https://cdn.bootcss.com/flat-ui/2.3.0/css/flat-ui.min.css" rel="stylesheet">

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>动画效果</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="../Documents/lib/animate.css">
       
       
            
        
            
    </head>
    <body>
        
        <div id="p">
        <input type="button" @click="flag=!flag" value="button">
        <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="300">
        
            <h3 v-if="flag" class="animated">动画类效果演示</h3>
        </transition>
    </div>

    <script>
            var vue= new Vue(
                {
                
                el: '#p',
                data:{
                    flag:false
                },
                methods:{
                    dh(){
                        
                    }
                    
            }
        
            }
            )
            
            </script>
    </body>

    
</html>

上海_彭彭

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端应用_Vue_使用第三方 animate.css 实现动

前面是vue 自带的，需要定义style 非常的烦，怎么解决呢，用第三方库就行了，他已经定义好了css 样式，拿来直接用就行了。例子如下： <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duratio="300"> <h3...
复制链接

扫一扫