Vue入门笔记#过渡

Vue过渡，可以在元素从DOM中移除，插入时自动调用过渡效果。根据设定，会适时的触发过渡效果。

在使用的目标标签里添加 transition：

<div  transition="my_transition"></div>

 

https://jsfiddle.net/miloer/n282tqwv/

它还可以和v-if,v-show,v-for，动态组件一起使用。

官方对Vue过渡过程的讲解：

1. 尝试以 ID "my-transition" 查找 JavaScript 过渡钩子对象——通过Vue.transition(id, hooks) 或 transitions 选项注册。如果找到了，将在过渡的不同阶段调用相应的钩子。
2. 自动嗅探目标元素是否有 CSS 过渡或动画，并在合适时添加/删除 CSS 类名。
3. 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作（插入/删除）在下一帧中立即执行。

 

还可以利用javascript钩子来实现过渡，一开始我把钩子写在里面了，它放在外面。

官方CSS块代码有个这样的注释：

/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */

这个就是动画结束后的最终状态，我觉得它只是一个局部状态，最终还是受目标标签里的代码约束的。

https://jsfiddle.net/miloer/n282tqwv/1/

过渡的CSS名，

类名的添加和切换取决于 transition 特性的值。比如 transition="fade"，会有三个 CSS 类名：

1. .fade-transition 始终保留在元素上。
2. .fade-enter 定义进入过渡的开始状态。只应用一帧然后立即删除。
3. .fade-leave 定义离开过渡的结束状态。在离开过渡开始时生效，在它结束后删除。

如果 transition 特性没有值，类名默认是 .v-transition, .v-enter 和 .v-leave。

官方的流程详解，我觉得挺好

当 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钩子。   

在加一个官方的小例子，整理出来：https://jsfiddle.net/miloer/7zjq41mz/