vue单组件过渡

vue过渡/动画

vue 给我们提供了 过渡动画的效果，用起来还是挺方便的。来试一试。

单组件过渡

vue过渡

vue中给我们提供了 transition 标签，它负责将需要过渡的元素包起来进行过渡效果的展示。

过渡类名

vue官网的过渡类名图

简单理解为 进入 和 离开 两个过程

进入

进入阶段分为两个时间点(v-enter,v-enter-to) 而两个时间点组成了一个时间段(v-enter-active)，这个时间段中可以设置透明度(opacity)从0 -> 1 ，从而达到进入的过渡效果

离开

同进入一样也分为两个时间点(v-leave,v-leave-to) 而两个时间点组成了一个时间段(v-leave-active)，这个时间段中可以设置透明度(opacity)从1 -> 0 ，从而达到离开的过渡效果

transition 的 name 属性：

我们可以看到过渡的类名都是以 v- 为前缀，vue为我们提供了 name 属性来修改过渡类名的前缀

例如: <transition name=“my-transition”>内容</transition>

这样 v-enter 就变成了 my-transition-enter，其他也一样

vue动画

vue动画的用法与过渡一致，区别为动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。
详细查看 vue过渡类名

自定义过渡类名

如果不满足于默认的过渡类名，我们可以自定义我们自己的类名，通过在 transition 中添加对应的属性来指定对应的自定义过渡类名👇

enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)

钩子函数

我们知道可以通过js操作dom元素来修改css样式，vue同样的给我们提供了钩子函数来实现每一个阶段的样式状态

v-on:before-enter=“beforeEnter”
v-on:enter=“enter”
v-on:after-enter=“afterEnter”
v-on:enter-cancelled=“enterCancelled”

v-on:before-leave=“beforeLeave”
v-on:leave=“leave”
v-on:after-leave=“afterLeave”
v-on:leave-cancelled=“leaveCancelled”

每个钩子函数都带有 el 参数，表示的是绑定的元素
我们可以输出el试试看

注： 当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css=“false”，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。