说明

通过vue transiton和animate.css进行结合可以做到很多意想不到的效果

动画定义上分为两种，一种是过渡动画也就是v-if或者v-show显示隐藏时候的动画，这时候回使用transiton进行过渡。 还有一种就是常驻动画，通过某种事件触发动画的产生。下面分别展示两种动画的场景

• 传统使用 transiton 通过指定入和出的动画就可以达到animate.css中的效果

触发

<template>
<div>
  <db-transition enterActiveClass="bounceIn" leaveActiveClass="bounceOut">
    <h1 class="callout-title" v-if="show">Animate.css</h1>
  </db-transition>
  <db-button @click="show = !show">触发</db-button>
</div>
</template>
<script>
export default {
  data () {
    return {
      show: false
    }
  }
}
</script>

Expand Copy Copy

• 设定时间通过duration来设置动画时长

触发

<template>
<div>
  <db-transition enterActiveClass="bounceIn" :duration="3000" leaveActiveClass="bounceOut">
    <h1 class="callout-title transiton-title" v-if="show">Animate.css</h1>
  </db-transition>
  <db-button @click="show = !show">触发</db-button>
</div>
</template>
<script>
export default {
  data () {
    return {
      show: false
    }
  }
}
</script>
<style>
.transiton-title{
  animation-duration: 3s;
}
</style>

Expand Copy Copy

• 如何监听钩子，通过传输on这个参数即可

触发

<template>
<div>
  <db-transition enterActiveClass="bounceIn" leaveActiveClass="bounceOut" :on="on">
    <h1 class="callout-title" v-if="show">Animate.css</h1>
  </db-transition>
  <db-button @click="show = !show">触发</db-button>
</div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      on: {
        beforeEnter: this.beforeEnter,
        // enter: this.enter,
        afterEnter: this.afterEnter,
        enterCancelled: this.enterCancelled,
        beforeLeave: this.beforeLeave,
        // leave: this.leave,
        afterLeave: this.afterLeave,
        leaveCancelled: this.leaveCancelled
      },
    };
  },
  methods: {
    // --------
    // 进入中
    // --------
    beforeEnter: function (el) {
      // ...
    },
    // 当与 CSS 结合使用时
    // 回调函数 done 是可选的
    // enter: function (el, done) {
    //   // ...

    // },
    afterEnter: function (el) {
      // ...
    },
    enterCancelled: function (el) {
      // ...
    },

    // --------
    // 离开时
    // --------

    beforeLeave: function (el) {
      // ...
    },
    // 当与 CSS 结合使用时
    // 回调函数 done 是可选的
    // leave: function (el, done) {
    //   // ...
    //   done()
    // },
    afterLeave: function (el) {
      // ...
    },
    // leaveCancelled 只用于 v-show 中
    leaveCancelled: function (el) {
      // ...
    }
  },
};
</script>

Expand Copy Copy

• db-transiton 本身就是继承transiton所以他能继承transiton所有的特性你可以完全把他当前transiton来使用

Toggle

<template>
  <div id="demo">
    <db-button v-on:click="show = !show">
      Toggle
    </db-button>
    <db-transition name="fade">
      <p v-if="show">hello</p>
    </db-transition>
  </div>
</template>
<script>
export default {
  data () {
    return {
      show: false
    }
  }
}
</script>
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>

Expand Copy Copy

属性

属性	说明	类型	可选值	默认值	版本
enterActiveClass	移入动画名称	String	继承animate.css		1.0.0
leaveActiveClass	移出动画名称	Sting	继承animate.css		1.0.0
on	动画事件	Sting	继承vue transition		1.0.0