美文网首页
在Vue中同时使用过渡和动画

在Vue中同时使用过渡和动画

作者: daoqing99 | 来源:发表于2018-04-17 16:49 被阅读0次
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>在Vue中同时使用过渡和动画</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<style>


.fade-enter,
.fade-leave-to{
opacity: 0;
}

.fade-enter-active,
.fade-leave-active{
    transition:opacity 10s;
}

div{
    font-size: 20px;
    width: 300px;
    margin:200px auto;
    text-align: center;
}
</style>

<body>
    <div id="app">
        <transition name='fade' appear type='transition' :duration="{enter:5000,leave:1000}"
        enter-active-class='animated swing fade-enter-active' 
        leave-active-class='animated shake fade-leave-active'
        appear-active-class='animated swing'
        >
            <div v-if='show'>hello world</div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
    <script>
    new Vue({
        el: "#app",
        data: {
            show: true
        },
        methods: {
            handleClick: function() {
                this.show = !this.show;
            }
        }
    })
    </script>
</body>

</html>

type='transition':duration="5000" 二选一

使用animate.css必须使用vue的 enter-active-classleave-active-class;后面紧跟animated类名和想使用的动画名称(区分大小写);
animate 使用的是@keyframes动画,fade-enter-active,
fade-leave-active加的是transition动画。

transition动画和transform动画时长不一样,使用type='transition'transition动画时长为准。或者 绑定属性:duration="5000"自定义时长;
fade名称与<transition name="fade">name一致,
appear,appear-active-class实现页面加载的初次动画

相关文章

网友评论

      本文标题:在Vue中同时使用过渡和动画

      本文链接:https://www.haomeiwen.com/subject/kdrpkftx.html