Vue.js - Transition过渡动画的使用5（结合animate.css动画库的使用）

2018-09-20 发布：hangge 阅读：6069

五、与animate.css 动画库配合使用

1，基本介绍

（1）animate.css 是一个十分强大的 css3 动画库，里面预设了很多种常用的动画，省去了我们手动编写 css 过渡代码的工作。

GitHub 主页：https://github.com/daneden/animate.css

（2）而且其使用也很简单，想要使用哪种动画的时候，只需要把那个相应的类添加到元素上就行了。目前提供的动画如下：

Class Name
`bounce`	`flash`	`pulse`	`rubberBand`
`shake`	`headShake`	`swing`	`tada`
`wobble`	`jello`	`bounceIn`	`bounceInDown`
`bounceInLeft`	`bounceInRight`	`bounceInUp`	`bounceOut`
`bounceOutDown`	`bounceOutLeft`	`bounceOutRight`	`bounceOutUp`
`fadeIn`	`fadeInDown`	`fadeInDownBig`	`fadeInLeft`
`fadeInLeftBig`	`fadeInRight`	`fadeInRightBig`	`fadeInUp`
`fadeInUpBig`	`fadeOut`	`fadeOutDown`	`fadeOutDownBig`
`fadeOutLeft`	`fadeOutLeftBig`	`fadeOutRight`	`fadeOutRightBig`
`fadeOutUp`	`fadeOutUpBig`	`flipInX`	`flipInY`
`flipOutX`	`flipOutY`	`lightSpeedIn`	`lightSpeedOut`
`rotateIn`	`rotateInDownLeft`	`rotateInDownRight`	`rotateInUpLeft`
`rotateInUpRight`	`rotateOut`	`rotateOutDownLeft`	`rotateOutDownRight`
`rotateOutUpLeft`	`rotateOutUpRight`	`hinge`	`jackInTheBox`
`rollIn`	`rollOut`	`zoomIn`	`zoomInDown`
`zoomInLeft`	`zoomInRight`	`zoomInUp`	`zoomOut`
`zoomOutDown`	`zoomOutLeft`	`zoomOutRight`	`zoomOutUp`
`slideInDown`	`slideInLeft`	`slideInRight`	`slideInUp`
`slideOutDown`	`slideOutLeft`	`slideOutRight`	`slideOutUp`
`heartBeat`

2，安装配置

（1）如果 Vue 项目需要使用 animate.css 的话，首先进入项目文件夹执行如下命令进行安装：

npm install animate.css -save

（2）然后在 main.js 中将其引入即可。

import animate from 'animate.css'
Vue.use(animate)

3，单个组件过渡

（1）效果图

通过点击按钮对下方图片进行显示或隐藏（交替）。
图片隐藏时会有缩小、逐渐透明消失的动画效果。
图片显示时会有放大、逐渐出现的动画效果。

（2）想要将 animate 与 <transition> 组件结合使用，只需使用 transition 的自定义过渡类名，将设置为需要使用的 animate 的动画类即可。

注意：无论是用哪个动画，都不要漏了 animated 这个 class。

<template>
  <div id="app">
    <button @click="show = !show">显示/隐藏</button>
    <br>
    <transition name="fade"
      enter-active-class="zoomIn"
      leave-active-class="zoomOut">
      <img v-show="show" class="animated" src="./assets/logo.png">
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: function(){
    return {
      show: true
    }
  }
}
</script>

（3）上面的样例代码还可以换成如下写法：

<transition name="fade"
  enter-active-class="animated zoomIn"
  leave-active-class="animated zoomOut">
  <img v-show="show" src="./assets/logo.png">
</transition>

4，多个元素、组件的过渡

（1）效果图

每次点击切换按钮后，下方“组件一”“组件二”会交替切换显示。
切换时，当前组件会往左侧滑出，而新组件同时从右侧滑入。

（2）样例代码

<template>
  <div id="app">
    <button @click="changeIndex">切换</button>
    <br>
    <transition
      enter-active-class="slideInRight"
      leave-active-class="slideOutLeft">
      <div id="div1" class="animated"  v-if="index === 1" key="div1">组件1</div>
      <div id="div2" class="animated"  v-else key="div2">组件2</div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: function(){
    return {
      index: 1, //显示的组件索引
    }
  },
  methods: {
    changeIndex() {
      this.index = (this.index%2)+1;
    }
  }
}
</script>

<style>
  #div1 {
    width:150px;
    height:100px;
    background:yellow;
    position: absolute;
  }

  #div2 {
    width:150px;
    height:100px;
    background:orange;
    position: absolute;
  }
</style>

（3）上面高亮部分的代码同样可以改成如下写法：

<transition
  enter-active-class="animated slideInRight"
  leave-active-class="animated slideOutLeft">
  <div id="div1" v-if="index === 1" key="div1">组件1</div>
  <div id="div2"  v-else key="div2">组件2</div>
</transition>

5，transition-group 列表过渡

（1）效果图

点击“插入一个元素”按钮，会在下方随机位置插入一个新的数字方块，新方块在插入过程中会有过渡动画（逆时针往上旋入）。
点击“移除一个元素”按钮，会随机删除下方的一个数字方块，该方块在移出过程中会有过渡动画（逆时针往下旋出）。

（2）样例代码

<template>
  <div id="app">
    <div id="list-demo" class="demo">
    <button v-on:click="add">插入一个元素</button>
    <button v-on:click="remove">移除一个元素</button>
    <transition-group name="list" tag="p"
      enter-active-class="animated rotateInUpLeft"
      leave-active-class="animated rotateOutDownLeft position-absolute">
      <span v-for="item in items" v-bind:key="item" class="list-item">
        {{ item }}
      </span>
    </transition-group>
  </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: function(){
    return {
      items: [1,2,3,4,5,6,7,8,9],
      nextNum: 10
    }
  },
  methods: {
    randomIndex: function () {
      return Math.floor(Math.random() * this.items.length)
    },
    add: function () {
      this.items.splice(this.randomIndex(), 0, this.nextNum++)
    },
    remove: function () {
      this.items.splice(this.randomIndex(), 1)
    },
  }
}
</script>

<style>
  /** 方块元素的样式 **/
  .list-item {
    display: inline-block;
    margin-right: 10px;
    background-color: orange;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #ffffff;
  }
  /** 移除过程中位置固定（确保排序过渡正常） **/
  .position-absolute {
   position: absolute;
  }
  /*** 元素定位改变时动画 ***/
  .list-move {
    transition: transform 1s;
  }
</style>

附一：设置延时

默认情况下过渡动画是立刻播放的，我们可以通过如下方法延时播放。

1，使用内置的延时 class

（1）animate 默认提供了如下 5 个样式表示不同的延时时长：

delay-1s：延时 1 秒
delay-2s：延时 2 秒
delay-3s：延时 3 秒
delay-4s：延时 4 秒
delay-5s：延时 5 秒

（2）使用时只需在 class 中设置对应的样式即可：

<img v-show="show" class="animated delay-2s" src="./assets/logo.png">

2，自定义延时时长

如果觉得默认提供的几种延时时长不能满足需要，我们可以通过自定义样式了实现。

<img v-show="show" class="animated delay-10s" src="./assets/logo.png">

<style>
  .animated.delay-10s {
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
  }
</style>

附二：设置动画时长

默认情况下所有过渡动画都是持续 1 秒种，我们可以通过如下方法修改时长。

1，使用内置的延时 class

（1）animate 默认提供了如下 4 个样式来加快或减缓动画的播放：

slow：动画持续 2 秒
slower：动画持续 3 秒
fast：动画持续 800 毫秒
faster：动画持续 500 毫秒

2，自定义动画时长

如果觉得默认提供的几种动画时长不能满足需要，我们可以通过自定义样式了实现。

<img v-show="show" class="animated fastest" src="./assets/logo.png">

<style>
.animated.fastest {
  -webkit-animation-duration: 200ms;
  animation-duration: 200ms;
}
</style>