如何在Vue中实现过渡效果

Vue中有一个自带的transition组件，就是用来实现过渡效果的，具体怎么使用呢，很简单，其实就两个步骤：

①用transition组件，把要做过渡效果的元素包起来

②写上相应的过渡效果的css

是不是很简单，比把大象装冰箱还简单。然而，并没有，在这两个步骤中，我们要遵守一定的规则：

在第一步中，我们要给transition组件写一个name，例如

<div id="box" class="box">
　　<div @click="showFn" class="green">
　　　　<transition name="red"><div v-show="show" class="red"></div></transition>
　　</div>
</div>

相对应的css也是有规则的，要根据transition是name属性延伸出来：[name]-enter、[name]-enter-active、[name]-leave、[name]-leave-active；

这四个属性分别是什么意思呢？

[name]-enter：显示或加载元素时的过渡效果的初始样式（在元素被插入之前生效，在元素被插入之后的下一帧移除）

[name]-enter-active：显示或加载元素时的过渡效果的动画样式（在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。）

[name]-leave：隐藏或删除元素时的过渡效果的初始样式（在离开过渡被触发时立刻生效，下一帧被移除）

[name]-leave-active：隐藏或删除元素时的过渡效果的动画样式（在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。）

下面，上代码：

.red{
    width: 100%;
    height: 100%;
    background-color: red;
    /*下面的样式可以不写，这里为了方便理解*/
    opacity: 1;
    margin-left:0;
}
.red-enter{
    opacity: 0;
    margin-left:100%;
}
.red-enter-active,.red-leave-active{
    transition: all 1s;
}
.red-leave{
    /*对于简单动画来说，[name]-leave也可以不写，多数情况下，此处的样式和元素正常显示是的样式是相同的*/
    opacity: 1;
    margin-left:0;
}
.red-leave-active{
    opacity: 0;
    margin-left:100%;
}

这样，在控制transition内的div标签显示隐藏时，就有了过渡效果了，是不是很简单。