vue动画笔记

vue动画笔记

学习地址 https://cn.vuejs.org/v2/guide/transitions.html

简介

vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果，包括以下工具：

• 在css过渡和动画中自动应用class
• 可以配合使用第三方CSS动画库，如Animate.css
• 在过渡钩子函数中使用JavaScript直接操作DOM
• 可以配合使用第三方JavaScript动画库，如Velocity.js

<transition name="fade">
    <p v-if="show">hello</p>
  </transition>

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

过渡的类名

1. ·v-enter： 定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的夏一珍移除。
2. v-enter-active：定义进入过渡生效时的状态。
3. v-enter-to：定义进入过渡的结束状态。（ 2.1.8 版及以上 ）
4. v-leave： 定义离开过渡的开始状态。
5. v-leave-active： 定义离开过渡生效时的状态。
6. v-leave-to： 定义离开过渡的结束状态。 （ 2.1.8 版及以上 ）

如果使用的是没有名字的 <transition>,则 v- 是这些类名的默认前缀。如果使用了 <transition name="my-transition">，那么 v-enter会替换为 my-transition-enter。

自定义过渡的类名

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

<transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>

JavaScript钩子

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

methods: {
    beforeEnter: function (el) {},
    enter: function(el, done) {done()}, //当与 CSS 结合使用时,回调函数done是可选的
    afterEnter: function (el) {},
    enterCancelled: function (el) {},
	beforeLeave: function (el) {},
	leave: function (el, done) {done()},//当与 CSS 结合使用时,回调函数done是可选的
	afterLeave: function (el) {},
	leaveCancelled: function (el) {} //leaveCancelled只用于 v-show中
}

• 当只用JavaScript过渡的时候，在enter和leave中必须使用done进行回调。否则它们将被同步调用，过渡会立即完成。
• 推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

初始渲染的过渡

可以通过appearattribute设置节点在初始渲染的过渡

<transition appear>
  <!-- ... -->
</transition>

多个元素的过渡

• 对于原生标签可以使用 v-if/v-else ，需要 给在 transition 组件中的多个元素设置 key 作为区分