使用animate.css库,同时使用过度和动画

最新推荐文章于 2024-03-16 14:05:05 发布

Akita·wang

最新推荐文章于 2024-03-16 14:05:05 发布

阅读量1.5k

点赞数

分类专栏： vue.js框架

本文链接：https://blog.csdn.net/qq_19168521/article/details/80931205

版权

vue.js框架专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用animate.css库,同时使用过度和动画</title>
    <script src="vue.js"></script>
    <link rel="stylesheet" href="./animate.css">
    <style>
        .fade-enter,
        .fade-leave{
          opacity: 0;
     }
        .fade-enter-active,
        .fade-leave-active{
            transition:opacity 2s;
        }

    </style>
</head>
<body>


<div id="root">
    <transition
     :duration="{enter:3000,leave:3000}"   设置动画入场和退场的时间
     name="fade"
     appear    使打开页面时就有动画
    appear-active-class="animated swing"
     enter-active-class="animated swing fade-enter-active"
     leave-active-class="animated shake fade-leave-active"
    >
        <div v-if="show">用transition标签进行包裹</div>
    </transition>
    <button @click="handleClick">change</button>

</div>


<script>
    var vm=new Vue({
        el:"#root",
        data:{
            show:true
        },
        methods:{
            handleClick:function(){
                this.show = !this.show
            }
        }
    })
</script>
</body>
</html>

Akita·wang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用animate.css库,同时使用过度和动画

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;使用animate.css库,同时使用过度和动画&lt;/title&gt; &lt;script src="vue.js"
复制链接

扫一扫