组件过渡&动画之transition方法

在components下新建一个Transition.vue文件

Vue提供了 transition 的封装组件，在下面四种情形下，可以给任何元素和组件添加entering/leaving过度

• 条件渲染 (使用 v-if)
• 条件展示 (使用 v-show)
• 动态组件
• 组件根节点

下面为大家一一演示一遍

CSS过渡

v-if 条件渲染与v-show 条件展示

Transition.vue组件

图片.png

APP.vue组件

图片.png

过渡的类名

元素在进入、离开的过渡中，会有6个class切换

• v-enter-active和v-leave-active定义过渡的状态，可以设置transition/animation，用来设置过渡过程时间延迟和曲线函数
• v-enter定义进入过渡的开始状态，在元素被呈现时刻生效
• v-leave-to 定义结束过渡的结束状态
• v-enter-to和v-leave一般在设置过渡时可以不用

图片.png

CSS动画

图片.png

JavaScript 钩子

注：仅使JavaScript过渡的元素要添加:css="false",使Vue跳过CSS的检测，可以避免过渡过程中CSS的影响; 在 enter 和 leave 中，回调函数 done 是必须的 。否则，它们会被同步调用，过渡会立即完成。

图片.png

动态组件的过渡

比如有两个组件Div1和Div2,我们在Transition组件里面实现这两个组件的过渡

图片.png