动画(过渡)

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

1. 单组件/元素过渡

• 过渡的类名

会有 4 个(CSS)类名在 enter/leave 的过渡中切换

1. v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
2. v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。
3. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
4. v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。

image

.box {
    width: 300px;
    height: 300px;
    background: red;
}

.fade-enter-active,
.fade-leave-active {
    transition: all 2s ease;
}

.fade-enter-active  { /*变化成什么样, 显示的过程 */
    width: 300px;
    height: 300px;
    opacity: 1;
}

.fade-enter {  /* 显示前的状态 */
    width: 100px;
    height: 100px;
    opacity: 0;
}

.fade-leave { /* 消失前的状态 */
    width: 300px;
    height: 300px;
    opacity: 1; 
}

.fade-leave-active { /*变化成什么样, 消失的过程 */
    width: 100px;
    height: 100px;
    opacity: 0; 
}

<div id="app">
        <button @click="toggle">点击显示隐藏</button>
        <transition name="fade">
            <div class="box" v-show="show"></div>
        </transition>
</div>

new Vue({
    el: '#app',
    data: {
        show: false
    },
    methods: {
        toggle: function() {
            this.show = !this.show;
        }
    }
});

• 自定义过渡类名

我们可以通过以下特性来自定义过渡类名：

• enter-class
• enter-active-class
• leave-class
• leave-active-class

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

<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="stylesheet" type="text/css">
<div id="example-3">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated bounceInLeft"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>
</div>

new Vue({
  el: '#example-3',
  data: {
    show: true
  }
})

• 回调事件

<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 过渡的时候， 在 enter 和 leave 中，回调函数 done 是必须的 。 否则，它们会被同步调用，过渡会立即完成。

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

• 过渡模式
  • in-out: 新元素先进行过渡，完成之后当前元素过渡离开。
  • out-in: 当前元素先进行过渡，完成之后新元素过渡进入。

2. 列表过渡

渲染整个列表，比如使用 v-for ？在这种场景中，使用 <transition-group> 组件

1. 不同于 <transition>， 它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag 特性更换为其他元素。
2. 内部元素 总是需要 提供唯一的 key 属性值

• 列表的进入和离开过渡
  与单个组件/元素一样