hide show vue 动画_Vue 教程第九篇—— 动画和过度效果

过渡效果

SPA 中组件的切换有一种生硬的隐藏显示感觉，为了更好的用户体验，让组件切换时淡出淡入，Vue 提供了专门的组件 transition。

过滤效果应用场景

条件渲染 (使用 v-if)

条件展示 (使用 v-show)

动态组件

组件根节点

过渡状态

enter：定义进入过渡的开始状态。在元素被插入时生效。

endter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效。

enter-to: 2.1.8版及以上 定义进入过渡的结束状态。

leave：定义离开过渡的开始状态。在离开过渡被触发时生效。

leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效。

leave-to: 2.1.8版及以上 定义离开过渡的结束状态。

每个状态在使用的时候都是在 CSS 中使用，结合组件 transition 的 name 属性。如 ，对应的是 fade- 加上每个状态：fade-enter。

CSS 过渡

使用到组件 transition 的属性: name。

/*初始状态*/

.fade-enter{opacity: 0;}

/*已经准备就绪*/

.fade-enter-active{transition: all .5s;}

/*已经消失*/

.fade-leave-active{opacity: 0; transition: all .5s;}