Vue动画详解 【图文】

# Vue动画
  想要给谁加动画效果，就给谁包裹transition标签
  transition默认会动态给被包裹元素添class样式：
      v-enter：元素显示/插入前的效果，元素初始的位置 例如：transform: translateX(-200%);
      v-active-enter：元素显示/插入的过渡时间和函数，初始前到最终的一个时间段 例如：transition: all 0.3s ease;
      v-enter-to：元素显示/插入后的效果，元素最终的位置 例如：transform: translateX(-100%); 
      
      v-leave：元素隐藏/移除前的效果，例如：transform: translateX(0);
      v-active-leave：元素隐藏/移除的过渡时间和函数，例如：transition: all 0.3s ease;
      v-leave-to：元素隐藏/移除后的效果，例如：transform: translateX(100%);


    v-enter-to与 v-leave 这个两个样式规定动画开始时元素的位置状态
    v-leave-to与v-enter 这个两个样式规定动画结束后元素的位置状态
    v-active-enter与 v-active-leave 这个两个样式代表执行动画的时间段 一般在这个阶段设置元素的过渡效果

  给transition添加上name="xxx" 那么默认的样式就得是.xxx-enter-active name改变v
  transition添加上:appear='true' 意思是组件已挂载，就会执行动画

  transition标签不会渲染到页面上
  '''js
  <transition>
    <div class="box" v-show="isShow"></div>
  </transition>
  '''
  
  transition只能包裹一个根元素，只能给一个元素添加动画

  给多个元素添加动画
  需要使用transition-group包裹
  并且transition-group包裹的元素需要绑定key

<template>
  <div>
    <button @click="showHide">显示与隐藏</button>
    <transition :appear="true">
      <div class="box" v-show="isShow"></div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
    };
  },
  methods: {
    showHide() {
      this.isShow = !this.isShow;
    },
  },
};
</script>

<style scoped>
.box {
  width: 300px;
  height: 30px;
  background-color: pink;
}

.v-enter,
.v-leave-to {
  transform: translateX(-100%);
}

.v-enter-active,
.v-leave-active {
  transition: 0.5s linear;
}

.v-enter-to,
.v-leave {
  transform: translateX(0);
}



/* .v-enter-active {
  animation: move 1s;
}
.v-leave-active {
  animation: move 1s reverse;
} */

/* @keyframes move {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
} */
</style>