vue 动画框架Animate.css @keyframes 

<script src="vue.js"></script>
<link rel="stylesheet" href="animate.css">
<style>
    /*@keyframes bounce-in {*/
    /*    0% {*/
    /*        transform:scale(0);*/
    /*    }*/
    /*    50% {*/
    /*        transform:scale(1.5);*/
    /*    }*/
    /*    100% {*/
    /*        transform:scale(1);*/
    /*    }*/
    /*}*/
    /*.active {*/
    /*    transform-origin:left center;*/
    /*    animation: bounce-in 1s;*/
    /*}*/
    /*.leave {*/
    /*    transform-origin:left center;*/
    /*    animation: bounce-in 1s reverse;*/
    /*}*/
</style>
<body>
    <section class="app">
        <transition name="fade"
                    enter-active-class="animated flip"
                    leave-active-class="animated hinge">
            <article v-if="show">Selecte</article>
        </transition>
        <button @click="handle">Option</button>
    </section>
<script>
    var vm = new Vue({
        el:".app",
        data: {
            show:true
        },
        methods: {
            handle:function () {
                this.show = !this.show
            }
        }
    })

</script>
</body>

上面是动画效果

Vue同时使用过渡和动画效果

1.页面首次加载需要显示的样式

transition标签中 加apper和 apper-active-class=“animated 动画效果”

2.同时拥有别的动画效果  需要在transition  label load

enter-active-class="animated swin(name) fade-enter-active"

然后写css样式

3.动画执行时间以谁的为准  vue有时候也不清楚

transition标签内规定

type=“transition”  (如何设置以另一种为标准)

自定义时长： 

：during=“1000” （1s）

复杂自定义动画播放时长

：during=“{enter: 5000, leave:2000}”

posted @ 2019-11-29 02:29  容忍君  阅读(2143)  评论(0)    收藏  举报