Vue 过渡 & 动画

过渡

前提： 需要过渡的元素要有 v-if 或者是 v-show 切换

1. 将需要添加过渡效果的元素用 组件包裹起来；
2. 需要过渡的元素有 v-if 或 v-show 切换；

        .box {
            width: 300px;
            height: 300px;
            background-color: red;
        }

        <transition>
            <div class="box"
            	v-show="show"
            >div>
        transition>
        
        <button @click="show = !show">
            Toggle
        button>

        new Vue({
            el: "#app",
            data() {
                return {
                    show: true
                }
            },
        })

3. 给 组件指定 name 属性；
4. 根据指定的 name 属性写过渡样式；

        <transition
            name="scale"
        >
            <div class="box" v-show="show">div>
        transition>

        /* 
            进入的过渡：隐藏 -> 显示；
            离开的过渡：显示 -> 隐藏；
         */

        /* 1. 定义进入过渡的开始状态； */
        .scale-enter{
            transform: scale(0);
        }
        /* 2. 定义进入过渡生效时的状态；这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 */
        .scale-enter-active {
            transition: all 1s;
        }
        /* 3. 定义进入过渡的结束状态； */
        .scale-enter-to {
            transform: scale(1);
        }

        /* 4. 定义离开过渡的开始状态； */
        .scale-leave {
            transform: scale(1);
        }
        /* 5. 定义离开过渡生效时的状态；这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。 */
        .scale-leave-active {
            transition: all 2s;
        }
        /* 6. 定义离开过渡的结束状态； */
        .scale-leave-to {
            transform: scale(0);
        }

多个元素的过渡

1. 多个元素要有切换（用 v-if 的话 nth-of-type() 样式可能不会生效，注意一下）
2. 使用控件 包裹起来，并指定 name 属性，书写对应的过渡样式；
3. 多个元素切换的时候，要给元素上添加 key 属性；
4. 不同于 ，会以一个真实元素呈现：默认为一个 。你也可以通过 tag 特性更换为其他元素。如：tag="p"

        <transition-group
	        name="scale">

            <div class="box" 
                v-show="activeIndex === index"
                v-for="(item, index) in 3"
                :key="index">
	            {{item}}
            div>
            
        transition-group>
 
        <a href="javascript:;" 
            @click="activeIndex>=2 ? activeIndex=2:activeIndex++" >
        	Toggle
        a>

       data() {
            return {
                activeIndex: 0
            }
        },

---

动画

@keyframes

1. 元素的切换 v-if 或 v-show

		<transition>
            <div class="box" v-show="show">div>
        transition>
        
        <a href="javascript:;" @click="show = !show">
            toggle
        a>

2. 用 @keyframe 编写动画，并使用一个类，使用动画，如下，淡入淡出

    @keyframes fadeInGx {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fadeOutGx {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    .fadeIn {
        animation: fadeInGx 1s;
    }

    .fadeOut {
        animation: fadeOutGx 1s;
    }

3. 使用过渡动画（方法一： 通过transition 的属性使用，不需要name 属性）

        <transition
            enter-active-class="fadeIn"
            leave-active-class="fadeOut"
        >
            <div class="box" v-show="show">div>
        transition>

4. 使用过渡动画（方法二：通过css类名使用）

    .gx-enter-active {
	    animation: fadeInGx 1s;
	}
    .gx-leave-active {
        animation: fadeOutGx 1s;
	}

<transition
	name="gx"
>
    <div class="box" v-show="show">div>
transition>

自定义过渡的类名

• enter-class
• enter-active-class 指定样式名称，什么的样式名称呢？进入的动画执行时的样式名称
• enter-to-class

---

• leave-class
• leave-active-class 指定离开的动画执行时的样式名称
• leave-to-class

Animate.css

通过 的 enter-active-class 和 leave-active-class 设置 Animate.css 的类名就好了；

<transition 
    name="gx"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
>
    <div class="box" v-show="show">
    div>
transition>

<button type="button" @click="show = !show">Togglebutton>


<transition 
    name="gx"
    :enter-active-class="in"
    :leave-active-class="out"
>
...
transition>