5-3#去哪儿网app#vue中同时使用过渡和动画

首先明确引入animate动画等价于之前@keyframes，过渡是transition。

transition和keyframes同一级别。

区别之一：transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframes 结合可以设置中间帧的一个状态。

本文讲两点：

1.将过渡和动画结合

关键点是在V层的transition标签中添加名，这点可以和AnimateCSS库(5-2)的代码进行对比：下面给一下css和html的代码，js与之前一样。

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<style>
    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }
    
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 3s;
    }
</style>

<div id="root">
    <transition 
    :duration={enter:5000,leave:10000} 
    name="fade" 
    appear 
    enter-active-class="animated swing fade-enter-active" 
    leave-active-class="animated shake fade-leave-active" 
    appear-active-class="animated swing"
    >
        <!-- 通过appear和appear-active-class为其添加一打开页面就有动画的效果 -->
        <!-- type="transition"的意思是动画时长以过渡为准 -->
        <!-- :duration="……"是自定义他们的时长 -->
        <div v-show="show">
            Byte Dance
        </div>
    </transition>
    <button @click="handleClick">
        toggle
    </button>
</div>

 2.动画时间和过渡时间的设置

①type="transition" 意为以transition的时间为准

②:duration="……"可以自定义时间，可以是对象的形式来分别设置时间

上段代码中有体现