过渡流程详解

根据我们第一节中的代码来讲解过渡流程：

当 show 属性改变时，Vue.js 将相应地插入或删除div元素，按照如下规则改变过渡的 CSS 类名：

如果 show 变为 false，Vue.js 将：

1. 用 beforeLeave 钩子；
2. 添加 v-leave 类名到元素上以触发过渡；
3. 调用 leave 钩子；
4. 等待过渡结束（监听 transitionend 事件）；
5. 从 DOM 中删除元素并删除 v-leave 类名；
6. 调用 afterLeave 钩子。

如果 show 变为 true，Vue.js 将：

1. 调用 beforeEnter 钩子；
2. 添加 v-enter 类名到元素上；
3. 把它插入 DOM；
4. 调用 enter 钩子；
5. 强制一次CSS 布局，让 v-enter 确实生效。然后删除 v-enter 类名，以触发过渡，回到元素的原始状态；
6. 等待过渡结束；
7. 调用afterEnter钩子。