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="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组件进行页面切换添加动画：

即使用下面的方式进行切换：

<template>
    <div class="page">
        <transition>
            <keep-alive>
                <router-view/>
            </keep-alive>
        </transition>
    </div>
</template>

详细案例请查看：https://blog.csdn.net/qq_41756580/article/details/106275305

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