Vue一个案例引起「动画」的使用总结

项目开发中动画有着很重要的做用，并且也是用到的地方很是多，例如：鼠标的进入离开，弹窗效果，组件的显示隐藏，列表的切换等等，能够说咱们网页上的动画无处不在，也有人说了，这些东西也能够不使用动画。

对，你说的没错能够不使用，可是，首先你要说服你的产品经理咱能不能简单点，不搞这么多虚的来点实际的，说完以后我估计大家俩得立马干起来，其次，在你的网页上不使用动画不够逼格啊，并且我们的网页也不够生动，没有活力，因而可知动画的不可或缺性。

上面只是开个玩笑，下面我们进入主题，看看 Vue 中如何更好更简单的添加动画。

首先，Vue 在插入，修改或者移除 DOM 时，提供了多种不一样的添加动画的方法，在 Vue 中咱们使用 <transition> 和 <transition-group> 组件时，Vue 会给咱们提供一些内置的 CSS 类与 JS 钩子函数。

先来看看咱们要实现一个什么样子的案例效果

图中的例子是一个很是常见的图片切换效果，不过在这个例子中咱们只是单纯的实现图片的切换，看起来很是的生硬，没有任何的过渡效果，下面咱们来给图片加一点动画的效果，让它看起来很是的有逼格。

CSS 过渡

被 <transition> 包裹的组件，在组件的不一样阶段会产生不一样的 class 类名进行切换

• v-enter/v-leave：动画的第一帧
• v-enter-acive/v-leave-active：动画运行的阶段，一些过渡属性会放置在这里，如：时间，延迟等
• v-enter-to/v-leave-to：动画结束，最后一帧

官网上的一张图片很是友好的展现了这个切换的过程。

v- 是 Vue 中默认的类名前缀，咱们在使用的过程当中若是一直使用默认的命名方式的话，必然会致使一些冲突，因此 Vue 给咱们提供了一个自定义命名的方案，咱们只须要给 <transition> 添加一个 name 属性便可。

既然咱们知道了方法，咱们就来给它加一个简单的动画。

<template>
<ul class="tabs-list">
  <li 
    v-for="tab in tabs"
    :key="tab.id"
    :class="{active: tabOn === tab.id}" 
  >
    <a
      @mouseover="tabOn = tab.id"
      :href="tab.url" target="_blank"
    >
      {{tab.name}}
      <transition name="flip">
        <img v-show="tabOn === tab.id" :src="tab.imgUrl">
      </transition>
    </a>
  </li>
</ul>
<template>
<style lang="scss" scoped>
.flip-enter-active {
  transition: transform 1s;
}
.flip-leave-active {
  transition: transform 1s;
}
.flip-enter,
.flip-leave-to {
  transform: scaleY(0);
}
</style>

CSS 动画

与上面 CSS 过渡不一样的是，咱们这里说的 CSS 动画是利用 @keyframes 来建立与上面相似的动画效果。

<style lang="scss" scoped>
@keyframes scaleY-in {
  0% {
    transform: scaleY(0);
  }
  50% {
    transform: scaleY(0.5);
  }
  100% {
    transform: scaleY(1);
  }
}
.flip-enter-active {
  animation: scaleY-in 1s;
}

.flip-leave-active {
  animation: scaleY-in 1s reverse;
}
</style>

使用第三方动画库

Vue 中给咱们提供了自定义 CSS 类名的方法，很是好的支持了与第三方动画库的结合。

• enter-class / leave-class
• enter-active-class / leave-active-class
• enter-to-class / leave-to-class

上面两个动画都是咱们本身动手写出来的，可是有些时候咱们本身手写的并非那么完美，或者项目的时间比较紧张，这个时候选择第三方库就是一个比较好的方案。咱们继续利用 Animate.css 动画库修改咱们上面的例子。

<transition 
    name="flip"
    enter-active-class="animated rotateIn"
    leave-active-class="animated rotateOut"
>
    <img v-show="tabOn === tab.id" :src="tab.imgUrl">
</transition>

JavaScript 动画

Vue 中还给咱们提供了一些钩子函数，咱们可使用 JavaScript 钩子函数构建动画。

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"

  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"
  :css="false"
>
</transition>

全部钩子都会传入一个 el（元素）参数，enter/leave 函数还会传入一个 done 函数做为参数。它会告知咱们的动画完成，咱们绑定了 css 为 false，告诉组件跳过 CSS 的检测，使用 JavaScript。

咱们结合 Velocity.js 动画，来修改完成咱们的动画效果。

<transition 
    @enter="enter"
    @leave="leave"
    :css="false"
>
    <img v-show="tabOn === tab.id" :src="tab.imgUrl">
</transition>
<script>
methods: {
    enter(el, done) {
      Velocity(el, { scaleY: "0" });
      Velocity(el, { scaleY: "0.5" }, { duration: 1000 });
      Velocity(el, { scaleY: "1" }, { complete: done });
    },
    leave: function(el, done) {
      Velocity(el, { scaleY: "1" });
      Velocity(el, { scaleY: "0.5" }, { duration: 1000 });
      Velocity(el, { scaleY: "0" }, { complete: done });
    }
}
</script>

过渡模式

咱们再来回头看看上面的例子，无论咱们使用何种方式实现的动画，你会发现一个问题就是，动画在切换的时候二者（进入/离开）是同时进行的，有些时候，咱们并不但愿产生这种效果，对咱们的动画效果很是的不友好，好比咱们看看下面的这个例子。

<template>
<div class="translate-container" @click="clickHandler">
  <transition name="slide">
    <img v-if="isShow" src="./feature/03.jpg" key="first">
    <img v-else src="./feature/04.jpg" key="second">
  </transition>
</div>
</template>
<script>
export default {
  methods: {
    clickHandler() {
      this.isShow = !this.isShow;
    }
  }
}
</script>
<style lang="scss" scoped>
    .slide-enter-active,
    .slide-leave-active {
      transition: all 0.5s;
    }
    .slide-leave-to,
    .slide-enter {
      transform: scaleY(0);
    }
</style>

很显然，这种是很是很差的效果，值得高兴的是 Vue 中给咱们提供了一个解决方案-- 过渡模式，咱们不须要增长额外的代码，只须要修改下特性便可。

Vue 给咱们提供了两种过渡模式。

• in-out：新元素先进行过渡，完成以后当前元素过渡离开。
• out-in：当前元素先进行过渡，完成以后新元素过渡进入

过渡模式只会在相互切换的元素中才会生效

<transition name="fade" mode="out-in"></transition>

<transition name="fade" mode="in-out"></transition>

下面咱们就用过渡模式修改咱们上面的案例。

<transition name="slide" mode="out-in">
    <img v-if="isShow" src="./feature/03.jpg" key="first">
    <img v-else src="./feature/04.jpg" key="second">
</transition>

总结

Vue 给咱们提供了比较直观灵活的 API，方便咱们在项目中添加动画的效果。

Vue 中除了这些单元素的动画之外还提供了<transition-group> 给个人列表（使用v-for 时的场景）添加动画，喜欢动画的小伙伴能够动手去尝试绘制一些本身喜欢的动画。

文中若有不足之处，欢迎留言指正，若是本文对你有帮助，欢迎转发点赞。

关注微信公众号：六小登登。领取全套学习资源