返回 导航

其他

hangge.com

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

作者：hangge | 2018-09-20 08:10

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

1，基本介绍

（1）animate.css 是一个十分强大的 css3 动画库，里面预设了很多种常用的动画，省去了我们手动编写 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>
评论

全部评论（0）

回到顶部