Vue一个案例激发「动画」的运用总结

2019年8月20日 197次阅读 来源: 六小登登

项目开辟中动画有着很主要的作用，而且也是用到的处所异常多，比方：鼠标的进入脱离，弹窗结果，组件的显现隐蔽，列表的切换等等，能够说我们网页上的动画无处不在，也有人说了，这些东西也能够不运用动画。

对，你说的没错能够不运用，然则，起首你要压服你的产物司理咱能不能简朴点，不搞这么多虚的来点现实的，说完以后我预计你们俩得立马干起来，其次，在你的网页上不运用动画不够逼格啊，而且我们的网页也不够活泼，没有生机，因而可知动画的不可或缺性。

上面只是开个打趣，下面我们进入主题，看看 Vue 中怎样更好更简朴的增添动画。

起首，Vue 在插进去，修正或许移除 DOM 时，供应了多种差别的增添动画的要领，在 Vue 中我们运用 <transition> 和 <transition-group> 组件时，Vue 会给我们供应一些内置的 CSS 类与 JS 钩子函数。

先来看看我们要完成一个什么模样的案例结果

《Vue一个案例激发「动画」的运用总结》

图中的例子是一个异常罕见的图片切换结果，不过在这个例子中我们只是纯真的完成图片的切换，看起来异常的僵硬，没有任何的过渡结果，下面我们来给图片加一点动画的结果，让它看起来异常的有逼格。

CSS 过渡

被 <transition> 包裹的组件，在组件的差别阶段会发生差别的 class 类名举行切换

  • v-enter/v-leave：动画的第一帧
  • v-enter-acive/v-leave-active：动画运转的阶段，一些过渡属性会安排在这里，如：时刻，耽误等
  • v-enter-to/v-leave-to：动画完毕，末了一帧

官网上的一张图片异常友爱的展现了这个切换的历程。
《Vue一个案例激发「动画」的运用总结》

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>

《Vue一个案例激发「动画」的运用总结》

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>

《Vue一个案例激发「动画」的运用总结》

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 中给我们供应了一个解决计划– 过渡形式，我们不需要增添分外的代码，只需要修正下特征即可。

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一个案例激发「动画」的运用总结》

总结

Vue 给我们供应了比较直观天真的 API，轻易我们在项目中增添动画的结果。

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

文中若有不足之处，迎接留言斧正，假如本文对你有协助，迎接转发点赞。

关注微信民众号：六小登登。领取全套进修资本

    原文作者：六小登登
    原文地址: https://segmentfault.com/a/1190000017159826
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞