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

作者: daoqing99 | 来源:发表于2018-04-17 16:49 被阅读0次

在Vue中同时使用过渡和动画
在Vue中同时使用过渡和动画
在Vue中同时使用过渡和动画
在Vue中同时使用过渡和动画
在Vue中使用css动画
(三)Vue中同时使用过渡和动画
2、在Vue中同时使用过渡和动画（Vue 中的动画特效）
2020-02-11
【Vue3 从入门到实战进阶式掌握完整知识体系】019-Vue
Vue过渡和动画概述

<!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-class 和 leave-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实现页面加载的初次动画