一些关于transltion的问题

transition的作用

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

transition的属性

1）v-enter：元素显示/插入前的效果，例如：transform: translateX(-200%);
2）v-active-enter：元素显示/插入的过渡时间和函数，例如：transition: all 0.3s ease;
3）v-enter-to：元素显示/插入后的效果，例如：transform: translateX(-100%);
4）v-leave：元素隐藏/移除前的效果，例如：transform: translateX(0);
5）v-active-leave：元素隐藏/移除的过渡时间和函数，例如：transition: all 0.3s ease;
6）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="formType==0" class="form-main" key="form1">
                        
            </div>
            <div v-else class="form-main" key="form2">
                        
            </div>
        </transition>
    </div>
</template>
<style>
    .page{
        position: relative;
        width: 100%;
        display: flex;
    }
    .form-main{
        width: 100%;
        flex-shrink: 0;
    }
    .fade-enter-active, .fade-leave-active {
        transition: all 0.3s ease;
    }
    .fade-enter{
        transform: translateX(-200%);
    }
    .fade-enter-to{
        transform: translateX(-100%);
    }
    .fade-leave{
        transform: translateX(0);
    }
    .fade-leave-to{
        transform: translateX(100%);
    }
</style>

注意

transition内部如果包裹的多个相同tag(标签)的元素时，需要给每个标签添加不同的key用以区别。否则的话动画不会生效。