过渡类名的使用
<transition name="fade"><div class="el"></div></transiton>
v-enter:进入时,开始动的状态(开始变化的一个状态,当变化开始时移除)。v-enter-active:变化的一个过程(从变化开始到变化结束)。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。v-enter-to: 变化的一个目标状态,从开始变化时生效,即v-enter移除的同时生效。到变化结束时移除,即和v-enter-active一起消失。(若没有v-enter-to样式,则默认为元素定义的样式即.el的样式)(紧接着是的元素呈现出最后的样式即——el的定义样式)
进入时的过渡为:开始于v-enter 过程 为v-enter-active 结束于v-enter-to(当没有v-enter-to时为.el最终定义的样式)
v-leave: 定义离开过渡的开始状态。即转头离开时的一个状态,转头时移除。v-leave-active:转头时立即生效,转头离开动作完成后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。v-leave-to: 离开动作的一个目标状态,转头时生效同时v-leave移除,转头离开动作完成时移除同时v-leave-active移除。
离开时的过渡:开始于v-leave(当有默认的.el样式时,优先选用.el样式),过程为:v-leave-active 离开结束时的状态为v-leave-to
小结:v-enter-to和.el优先选用v-enter-to样式,但最终是.el样式。
v-leave和.el优先选用.el样式,但最终是消失。