Vue同时使用transition(过渡)和animate.css(动画库)

动画库和过渡我们都简单介绍了如何单独使用!那么一起使用其实就是两者结合

<div id="app">
    <transition
            type="transition"
            appear
            enter-active-class="animated swing active"
            leave-active-class="animated bounceOutDown leave"
            appear-class="animated swing"
            :duration="{enter:3000,leave:5000}"
    >
        <p v-if="show">Hello World</p>
    </transition>
    <button @click="toggle">切换</button>
</div>
<script>
    var app=new Vue({
            el:"#app",
            data:{
                show:true
            },
            methods:{
                toggle:function(){
                    this.show=!this.show;
                }
            }

        })
</script>

添加过渡样式

.v-enter,.v-leave-to{
    opacity: 0;
    color: #000;
}
.active,.leave{
    color:deepskyblue;
    transition: all 3s;
}

给定不同状态是的css,实现过渡

    解决第一次出现没有动画新增apper属性点添加apper-active-class,同时使用过渡和动画,可以在class中新增过渡的calss,v-enter-active,v-leave-active,动画时间以哪个为准可以设置tyep=animation或者transition,也可以自定义动画时长,:duration传入数字(ms)或者传入对象enter和leave分别时长,


本博客所有文章如无特别注明均为原创。作者:十月梦想复制或转载请以超链接形式注明转自 十月梦想博客
原文地址《Vue同时使用transition(过渡)和animate.css(动画库)
分享到:更多

相关推荐

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)