vue动画

1.CSS transition

1.1 enter动画：

<template>
<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </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>

主要过渡类名：

xxx-enter

淡入的第一帧

xxx-enter-active

进入过度生效时的状态

xxx-enter-to

进去过渡结束的状态,一般就是原始状态。在执行完后，会将xxx-enter-active,xxx-enter-to这两个类全部移除。

p元素的执行流程：

p元素出现在dom中
p元素加上.fade-enter类
加上.fade-enter-active
移除.fade-enter,加上.fade-enter-to,保留.fade-enter-active
过度结束，移除.fade-enter-to,.fade-enter-active

1.2 leave动画

xxx-leave:

离开过渡的开始状态

xxx-leave-active:

离开过渡生效的状态

xxx-leave-to:

离开过渡的结束状态

CSS animation

<div id="example-2">
  <button @click="show = !show">Toggle show</button>
  <transition name="bounce">
    <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
  </transition>
</div>

new Vue({
  el: '#example-2',
  data: {
    show: true
  }
})

.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

只需要xxx-enter-active和xxx-leave-active,然后在这两个类中添加animation

js操作动画

在对应钩子中使用Velocity的方法。其中enter和leave钩子必须使用done回掉，否则会变成同步调用，会立即结束。

多元素过渡

在transition中可以有多个元素，通过v-if 和 v-else切换出现。

<div id="example">
    <transition name="fade">
      <button v-if="status ==='on'" @click="status='on'">on</button>
      <button v-if="status ==='off'" @click="status='off'">off</button>
    </transition>
 </div>

new Vue({
  el:'#example',
  data:{
    status:'on'
  }
})

.fade-enter-active,
.fade-leave-active {
  transition:all 1s;
}
.fade-enter{
  opacity:0;
}
.fade-leave-to {
  opacity:0
}

我们在transition中创建两个button,它们通过status来切换，然后在css中设置透明度。但是这样动画效果并没有生效。我们给这两个button添加key后，动画才能生效。

<transition name="fade">
      <button key="on" v-if="status ==='on'" @click="status='on'">on</button>
      <button key="off" v-if="status ==='off'" @click="status='off'">off</button>
 </transition>

当相同标签名的元素切换时，需要通过设置key来让vue区分它们，否则vue只会更改它们标签内部内容。
<transition>组件中元素最好都设置key
这时，动画虽然能够正常运行了，但是一个离开过渡的时候另一个开始进入过渡，我们需要的是一个执行完成后再执行下一个。vue提供了两种过渡模式：

in-out: 新元素先执行，完成后当前元素执行
out-in:当前元素先执行，完成后新元素执行

列表过渡

如果需要渲染整个列表的过渡，需要使用<transition-group>

<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-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to
{
  opacity: 0;
  transform: translateY(30px);
}

new Vue({
  el: '#list-demo',
  data: {
    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)
    },
  }
})

<transition-group>有个tag属性，它默认是span标签，但是实际情况中，我们需要的可能是别的标签，比如p，这时，我们设置这个tag，可以让vue在执行的时候把<transition-group>替换为p标签。