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 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

相关文章

问题现象 elmentui的el-tree数据加载问题,导致第一次加载选中当前节点和高亮当前节点没有生效。 解决方...
因为刚打开文件,vscode默认是预览状态,如果编辑过之后,就不会有这个问题。 可以通过双击将预览状态接...
前言 上篇文章我们介绍了国产SM4加密算法的后端java实现方案。没有看过的小伙伴可以看一下这篇文章。 h...
在项目中引入动态路由时报错 写法: 报错: Module build failed (from ./node_modules/_eslint-loader@2...
问题产生 在使用babel编译es6时,遇到报错Uncaught ReferenceError: regeneratorRuntime is not define...
父组件的编写 <a:orgCode=orgCode ></a> 在data里面增加...