Vue 过渡(动画)transition组件案例详解

前端之家收集整理的这篇文章主要介绍了Vue 过渡(动画)transition组件案例详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Vue过度(动画),本质走的是CSS3:transtion,animation。

控制器div显示/隐藏,代码如下:

Box">

这里写图片描述

我们已经实现了对div的显示/隐藏,但是没有过渡(动画)效果

1.单元素/组件的过渡

Vue提供了transition的封装组件,在下列情况中,可以给任何元素和组件添加”进入”和”离开”过渡动画。

条件渲染 (使用 v-if)

条件展示 (使用 v-show)

动态组件

组件根节点

改造:

Box">
.fade-enter-active,.fade-leave-active { transition: opacity .5s } .fade-enter,.fade-leave-active { opacity: 0 }

这里写图片描述

其他更多过渡动画方法,请看文档:

以上所述是小编给大家介绍的Vue 过渡(动画)transition组件案例详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Vue相关文章