你的位置:首页 > Java教程

[Java教程]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 变为 falseVue.js 将:

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

如果 show 变为 trueVue.js 将:

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