过渡 & 动画: 过渡与 Style 绑定

F12

1.当只用 JavaScript 过渡的时候,在 enter 和 leave 钩中必须使用 done 进行回调。否则,它们将被同步调用,过渡会立即完成。

2.添加 :css="false",也会让 Vue 会跳过 CSS 的检测,除了性能略高之外,这可以避免过渡过程中 CSS 规则的影响。

test: {{msg}}
1. 单元素/组件的过渡: Vue 提供了 transition 的封装组件

hello


2. 过渡class
在进入/离开的过渡中,会有 6 个 class 切换。
如果你使用一个没有名字的 transition,则 v- 是这些class名的默认前缀。
如果你使用了 transition name="my-transition",那么 v-enter-from会替换为 my-transition-enter-from。
3. CSS 过渡: 常用的过渡都是使用 CSS 过渡。

hello


4. CSS 动画: CSS 动画用法同 CSS 过渡,区别是在动画中 v-enter-from 类名在节点插入 DOM 后不会立即删除,而是在 animationend 事件触发时删除。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.


5. 自定义过渡 class 类名: 我们可以通过以下 attribute 来自定义过渡类名:
enter-from-class
enter-active-class
enter-to-class
leave-from-class
leave-active-class
leave-to-class

6. 显性的过渡持续时间
7.JavaScript 钩子: 可以在 attribute 中声明 JavaScript 钩子

js 钩子