18.transition动画

transition

transition的作用
首先我的理解是transition是作为元素切换时的过渡动画，例如在一个div进行v-if,v-show的时候，他的显示与隐藏分别进行怎样的变幻，都可以由transition进行控制。

transition的属性

• v-enter：元素显示/插入前的效果，例如：transform: translateX(-200%);
• v-active-enter：元素显示/插入的过渡时间和函数，例如：transition: all 0.3s ease;
• v-enter-to：元素显示/插入后的效果，例如：transform: translateX(-100%);
• v-leave：元素隐藏/移除前的效果，例如：transform: translateX(0);
• v-active-leave：元素隐藏/移除的过渡时间和函数，例如：transition: all 0.3s ease;
• v-leave-to：元素隐藏/移除后的效果，例如：transform: translateX(100%);

transition动画的实现是依靠css进行控制的，一般而言v-active-enter和v-active-leave的样式是一样的，因为这两个是定义过渡的状态，例如过渡的曲线、时间。

如果页面有多个transition的话可以通过修改name属性，分别给不同的transition添加变幻样式。

案例：

<template>
    <div class="page">
        <transition name="fade">
            <div v-if
1
2
3