vue元素实现动画过渡效果第一次接触到vue动画过渡
Vue中使用 transition标签或transition-group标签以及第三方类实现动画
后来看到居然打组合拳
再然后ELEMENTUI内置过渡动画(淡入)好吧造轮子费脑子的事情也不用考虑了
v-leave
当前元素准备从显示转变成隐藏
,在动画开始前添加到元素上,动画一旦开始会立即删除;
v-leave-active
在动画过渡过程中,元素一直拥有该样式,直到动画结束则自动删除,用于设置过渡的效果;
v-leave-to
在动画过渡过程中,元素一直拥有该样式,直到动画结束则自动删除,用于设置动画最终的效果;
事例中,当点击 button,div 并不会马上 display: none, 而是首先设置 v-leave ,下一刻即删除 v-leave ,同时添加 v-leave-active v-leave-to,当 v-leave-active 中的过渡时间执行完成,则删除 v-leave-active v-leave-to,同时添加 display: none。
v-enter
当前元素准备从隐藏转变成显示
,在动画开始前添加到元素上,动画一旦开始会立即删除;
v-enter-active
在动画过渡过程中,元素一直拥有该样式,直到动画结束则自动删除,用于设置过渡的效果;
v-enter-to
在动画过渡过程中,元素一直拥有该样式,直到动画结束则自动删除,用于设置动画最终的效果;
事例中,当点击 button,div 马上清除 display: none, 然后设置 v-enter ,下一刻即删除 v-enter ,同时添加 v-enter-active v-enter-to,当 v-enter-active 中的过渡时间执行完成,则删除 v-enter-active v-enter-to。