Vue.js ---- transition组件详细：

48 阅读 0 评论 32 点赞

我是靠谱客的博主端庄眼神，最近开发中收集的这篇文章主要介绍Vue.js ---- transition组件详细：，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

关于transition组件的使用请看：

https://www.runoob.com/vue2/vue-transitions.html

下面主要讲解transition组件钩子函数的问题以及我自己对它的理解（看下面前请先简单看一下上面的教程）

1.钩子函数在你看不到的地方做了什么？

2.done函数（我把它叫做过渡完成函数）在过渡过程中扮演的角色

3.过渡的时间、过渡完成标志

详细：

1.组件属性(具体使用看教程）

name

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

type

duration

appear

appear-class
appear-active-class
appear-to-class (2.1.8+)

2.组件共有三类过渡：初始渲染过渡、进入过渡、离开过渡

初始渲染过渡就是在第一次渲染的时候才会进行过渡，它的事件处理用的就是进入过渡的事件处理，默认的过渡过程使用的就是进入过渡的（不提供appear-XXX属性的情况），因此下面介绍事件就不理初始渲染过渡的事件

3.事件（我的理解，这是按照假如我写组件代码要怎么去实现它并使得结果符合实际测试结果来解释）

在介绍事件前我们要知道：

done函数：这是组件内的一个函数，它的作用就是完成未完成过渡（跳过动画，直接到完成结束）并触发完成（after）事件，且完成事件只通过done函数来触发

过渡完成标志flag：它是判断过渡是否完成的标志（动画完成并不代表过渡结束）只能通过完成（after）事件来修改标志

（进入/离开）过渡结束时间：默认是组件自动判断animation和transition最后结束的时间，如果设置了type属性那么就匹配对应结束时间为过渡结束时间，当然如果你还设置了duration属性，那么过渡结束时间就是你手动设置的duration属性了

接着我们介绍一下进入和离开过渡过程我们看不见的地方组件做了什么

进入过渡：

           v-on:before-enter="beforeEnter" - 开始前
               事件结束的时候会自动使用了done函数（作用上面介绍了）强制结束了之前的过渡
           v-on:enter="enter" - 过渡中（可以在这里通过js来设置过渡效果）
               函数被调用的时候还传递了一个实参 -----done函数。如果你定义的钩子函数没有第二个形参，那么该组件会自动替我们在过渡结束时间到的时候执行该函数（上面有介绍什么是过渡结束时间）。如果你定义的钩子函数提供了第二个形参，那么你可以在此事件内通过该形参使用done函数，组件并不会自动使用第二个形参，也就是说你提供了第二个形参之后过渡是永远不会自动完成的。
           v-on:after-enter="afterEnter" - 过渡完成

修改过渡完成标志
v-on:enter-cancelled="enterCancelled" - 过渡被取消

修改过渡完成标志

这个过程还干了什么我也不清楚，和过渡完成的区别大概就是不去完成过渡动画
离开过渡：
           v-on:before-leave="beforeLeave"- 开始前
               事件开始的时候会触发未完成进入过渡的enter-cancelled事件
               注意是 “取消了” “未完成的” 过渡，对于已经完成（触发过完成事件）的事件不会触发取消事件。
           v-on:leave="leave"- 过渡中
               同进入过渡
           v-on:after-leave="afterLeave" - 过渡完成

修改过渡完成标志
v-on:leave-cancelled="leaveCancelled"- 过渡被取消

修改过渡完成标志

这个过程还干了什么我也不清楚，和过渡完成的区别大概就是不去完成过渡动画