vue的多元素动画

0.引入animate.css

1.用transition标签包裹多个运动的元素，transtion-group标签使用enter-active-class定义进入动画的类，用leave-active-class定义离开动画的类。

2.被包裹的元素要使用key属性，属性值要唯一

例子：

<template>
  <div>
      <!-- 使用transition-group标签和 enter-active-class定义进入动画，leave-active-class定义离开动画 -->
    <transition-group  enter-active-class="animated bounce" leave-active-class="animated hinge" >
        <!-- 运动的元素里要加上唯一的key -->
      <div class="box" v-show="show"key="1"></div>
      <div class="box" v-show="show"  key="2"></div>
    </transition-group>
    <button @click="toggle()">切换</button>
  </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
        show:true
    };
  },
  methods:{
      toggle(){
          this.show = !this.show;
      }
  }
};
</script>
<style lang="css" scoped>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  margin:20px auto;
}
</style>