transition: Vue 提供了 transition 的封装组件,可以给任何元素和组件添加进入/离开过渡,可在目标div外部添加<transition></transition>标签,如果有多个元素则应该加transition-group。只需要在各个类名中写上对应的css样式即可。进入/离开过渡时有六种钩子函数:name-enter,name-enter-to,name-enter-active,name-leave,name-leave-to,name-leave-active。
v-enter:定义上半场过渡的初始状态;在过渡开始前被添加,在过渡开始时会被移除。v-enter-to:定义上半场过渡的结束状态;在过渡开始时被添加,在过渡完成时会被移除。
v-enter-active:这里包含了上面的v-enter、v-enter-to两个时间段,在这里可以对上半场过渡定义过渡时间、曲线等。
v-leave:定义下半场过渡的初始状态;在过渡开始前被添加,在过渡开始时会被移除。v-leave-to:定义下半场过渡的结束状态;在过渡开始时被添加,在过渡完成时会被移除。
v-leave-active:这里包含了上面的v-leave、v-leave-to两个时间段,在这里可以对下半场过渡定义过渡时间、曲线等。
在用钩子函数进行过渡效果制作时,v-enter-to、v-leave这两个类作用不大,第一个类是因为会被移除,第二个类是未起作用。所以可以不写这两个类的样式,如果强迫想要写这两个类的样式的话,那就必须将这两个类的样式写成跟元素本身样式一致。