<div id="demo">

  <button v-on:click="show = !show">

    Toggle

  </button>

  <transition name="fade">

    <p v-if="show">hello</p>

  </transition>

</div>

默认样式名：enter,enter-active,enter-to, leave,leave-active,leave-to

.fade-enter-active, .fade-leave-active {

  transition: opacity .5s

}

.fade-enter, .fade-leave-to  {

  opacity:

}

//使用animation:

.fade-enter-active {

  animation: bounce-in .5s;

}

.fade-leave-active {

  animation: bounce-in .5s reverse;

}

@keyframes bounce-in {

  % {

    transform: scale();

  }

  % {

    transform: scale(1.5);

  }

  % {

    transform: scale();

  }

}

自定义样式名：

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

<div id="example-3">

  <button @click="show = !show">

    Toggle render

  </button>

  <transition

    name="custom-classes-transition"

    enter-active-class="animated tada"

    leave-active-class="animated bounceOutRight"

  >

    <p v-if="show">hello</p>

  </transition>

</div>

动画的持续时间：

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

<div id="example-4">

  <button @click="show = !show">

    Toggle

  </button>

  <transition

    v-on:before-enter="beforeEnter"

    v-on:enter="enter"

    v-on:leave="leave"

    v-bind:css="false"

  >

    <p v-if="show">

      Demo

    </p>

  </transition>

</div>

new Vue({

  el: '#example-4',

  data: {

    show: false

  },

  methods: {

    beforeEnter: function (el) {

      el.style.opacity =

      el.style.transformOrigin = 'left'

    },

    enter: function (el, done) {//enter,leave函数中done是必须的

      Velocity(el, { opacity: , fontSize: '1.4em' }, { duration:  })

      Velocity(el, { fontSize: '1em' }, { complete: done })

    },

    leave: function (el, done) {

      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration:  })

      Velocity(el, { rotateZ: '100deg' }, { loop:  })

      Velocity(el, {

        rotateZ: '45deg',

        translateY: '30px',

        translateX: '30px',

        opacity:

      }, { complete: done })

    }

  }

})

//可以通过 appear 特性设置节点的在初始渲染的过渡

<transition

  appear

  appear-class="custom-appear-class"

  appear-to-class="custom-appear-to-class" (2.1.+)

  appear-active-class="custom-appear-active-class"

>

  <!-- ... -->

</transition>

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

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

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

  <component v-bind:is="view"></component>

</transition>

new Vue({

  el: '#transition-components-demo',

  data: {

    view: 'v-a'

  },

  components: {

    'v-a': {

      template: '<div>Component A</div>'

    },

    'v-b': {

      template: '<div>Component B</div>'

    }

  }

})

.component-fade-enter-active, .component-fade-leave-active {

  transition: opacity .3s ease;

}

.component-fade-enter, .component-fade-leave-to

/* .component-fade-leave-active for below version 2.1.8 */ {

  opacity: ;

}

<div id="list-demo" class="demo">

  <button v-on:click="add">Add</button>

  <button v-on:click="remove">Remove</button>

  <transition-group name="list" tag="p">

    <span v-for="item in items" v-bind:key="item" class="list-item">

      {{ item }}

    </span>

  </transition-group>

</div>

.list-enter-active, .list-leave-active {

  transition: all 1s;

}

.list-enter, .list-leave-to

/* .list-leave-active for below version 2.1.8 */ {

  opacity: ;

  transform: translateY(30px);

}

列表的排序过渡：

<div id="flip-list-demo" class="demo">

  <button v-on:click="shuffle">Shuffle</button>

  <transition-group name="flip-list" tag="ul">

    <li v-for="item in items" v-bind:key="item">

      {{ item }}

    </li>

  </transition-group>

</div>

.flip-list-move {

  transition: transform 1s;

}

<transition v-bind:name="transitionName">

  <!-- ... -->

</transition>

<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>

<div id="example-8">

  <input v-model.number="firstNumber" type="number" step=""> +

  <input v-model.number="secondNumber" type="number" step=""> =

  {{ result }}

  <p>

    <animated-integer v-bind:value="firstNumber"></animated-integer> +

    <animated-integer v-bind:value="secondNumber"></animated-integer> =

    <animated-integer v-bind:value="result"></animated-integer>

  </p>

</div>

Vue.component('animated-integer', {

  template: '<span>{{ tweeningValue }}</span>',

  props: {

    value: {

      type: Number,

      required: true

    }

  },

  data: function () {

    return {

      tweeningValue:

    }

  },

  watch: {

    value: function (newValue, oldValue) {

      this.tween(oldValue, newValue)

    }

  },

  mounted: function () {

    this.tween(, this.value)

  },

  methods: {

    tween: function (startValue, endValue) {

      var vm = this

      function animate () {

        if (TWEEN.update()) {

          requestAnimationFrame(animate)

        }

      }

      new TWEEN.Tween({ tweeningValue: startValue })

        .to({ tweeningValue: endValue }, )

        .onUpdate(function () {

          vm.tweeningValue = this.tweeningValue.toFixed()

        })

        .start()

      animate()

    }

  }

})

// 所有的复杂度都已经从 Vue 的主实例中移除！

new Vue({

  el: '#example-8',

  data: {

    firstNumber: ,

    secondNumber:

  },

  computed: {

    result: function () {

      return this.firstNumber + this.secondNumber

    }

  }

})