vue过渡动画效果

1 过渡基础

1.1 过渡的方式

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

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

1.2 过渡的情形

• 条件渲染 (使用 v-if)
• 条件展示 (使用 v-show)
• 动态组件
• 组件根节点

1.3 基本过渡实例

<template>
    <div id="demo">
          <button v-on:click="show = !show">
            Toggle
          </button>
          <transition name="fade">
            <p v-if="show">hello</p>
          </transition>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                show: true
            }
        }
    }
</script>

<style scoped>
    .fade-enter-active, .fade-leave-active {
         transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to {
          opacity: 0;
    }
</script>

2. CSS 实现过渡效果

2.1 过渡的类名

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAJYCAMAAABFOO8oAAAC/VBMVEX////+///8/f///P///fv///r///X/+vT9+Pj/+vr59/r19/7y+//y///4///4/P76+v/89fT+9u3/9uv99On98uf+8OD67ODy7eL65ub76+v64OD43t743Nz31NX0zMzuy8zny8zcyszfwsbqw8P0yMf0zMX0y7r1x670v6j7yKH6zqH21Z/416X43aT54a371rD83r/75bn+6b//8Mb/8M7/9tL/+dL/99j//N3/++X//+n//+/u8fPt9fvm8fvg7/jZ6PbS5fXN4vPD2/C+5fbA7f/J8v/P9v/W9//d+f/l+//o///k7e3l5+Tj5OTn49vd3dnS1dbQxszHyMi8wcq9wLmtuMicsMSPrsaCpb6Cp651m7d2ladzi5x4hIWAioKCkoWFkImZnJWonYO6oIPOp4fkqojun4vqlpbrmprlnKXspKLtqq/wtbXburnhxbLd0L/o2Lzy3b704Mj85c7+58n96NP27tLy3vP05Pr26frw0urrxObovOHwxtjlsdTlpcfgk8jghrvkjp7niorjdHTjc3PgZmbrZmbtg2brj2bzj2b1n2b4smb2smv3tXD2soD4voL0wIvws43xtZz5xZfwzZbkxZno16PIvJ/VsarDrKy8paC5spOoqqGssqyguayapLGcvdKbxeKfxeijyemqy+umyuKzzt241Oux3/Sz5Pyn2/Sg1/SY0vKJy+iDxOV6u99ps9pcrdZcptJVoNFZmcBaja1Xf5dPdYVbbGtod2+GfWabfVyqeVO2fFG+h1vGkVXNjWPUj2jZm3PPpm3XqmrdrXHdtHXjvYLGnWzInGGxjmybiHambFCtbFCmYVCeYVCUZ1KSVFCSTFCbVFCAPlB3PlBzPlBpPlBbPlBUPlBBPlAsPlAsPlUsPlwsPmEsPmQsPmgsPmwsPnMsPn8sPowtUoMsXYosU5QsU50sY6MsbaYsbZdCfaEsfLQsi8FBj8JBn9A2ZXQsU24sUVFBVFRdUlFaY1R0XFJ+a1ThZojhZp/gZrNDMgYFAAAqeElEQVR42uzAgQAAAACAoP2pF6kAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA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" alt="" />

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter

2.2 CSS transition

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.v-enter-active {
  transition: all .3s ease;
}
.v-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.v-enter, .v-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

2.3 CSS animation

.v-enter-active {
  animation: bounce-in .5s;
}
.v-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

2.4 自定义过渡的类名 和 第三方 CSS动画库

我们可以在<transtion>组件上通过以下属性来自定义过渡类名：

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

他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css结合使用十分有用。

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

2.6 设置过渡持续时间

在很多情况下，Vue 可以自动得出过渡效果的完成时机。默认情况下，Vue 会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定——比如，我们可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。

在这种情况下你可以用 <transition> 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)：

<transition :duration="1000">...</transition>

定制进入和移出的持续时间：

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

3 JavaScript 实现过渡效果

3.1 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) {
    // ...
  },
  // 此回调函数是可选项的设置
  // 与 CSS 结合时使用
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 此回调函数是可选项的设置
  // 与 CSS 结合时使用
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

JavaScript 钩子 适合 JavaScript过渡

当只用 JavaScript 过渡的时候， 在 enter 和 leave 中，回调函数 done 是必须的 。否则，它们会被同步调用，过渡会立即完成。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

3.2 第三方 JavaScript 动画库

使用 Velocity.js 的案例

 <transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false"
  >
    <p v-if="show">
      Demo
    </p>
  </transition>

 methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { fontSize: '1em' }, { complete: done })
    },
    leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
        rotateZ: '45deg',
        translateY: '30px',
        translateX: '30px',
        opacity: 0
      }, { complete: done })
    }
  }