vue过渡效果

vue提供了transition的封装组件,在下列情形中,可以给任何元素和组件添加。

使用v-if条件渲染。

使用v-show条件展示。

如:

.slide-enter-action{transition:all 2s linear;}.slide-leave-action{transition:all .4s cubic-bezier(1.0,0.5,0.8,1.0);}.slide-enter,.slide.leave-to{transition:transitionY(-10px);opacity:0;}

v-enter:定义进入过渡的开始状态,在元素被插入时生效,在下一个帧移除。

v-enter-action:定义进入过渡的结束状态,在元素被插入时生效,在transition完成之后移除。

v-leave:定义离开过渡的开始状态,在离开过渡被触发时生效,在下一个帧移除。

v-leave-action:定义离开过渡的结束状态,在离开过渡被触发时生效,在transition完成之后移除。

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容