vue 自定义名称动画 (来回)

<template>
  <div >
    <button @click="flag= !flag">按钮1</button>
    <transition>
      <div v-show="this.flag">我要动起来1</div>
    </transition>
    <hr />
    <button @click="flag2= !flag2">按钮2</button>
    <transition name="my">
      <div v-show="this.flag2">我要动起来2</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true,
      flag2: true
    };
  }
};
</script>

<style>
/* 
v-enter 动画进入之前 此时还没开始进入
v-leave-to离开之后 终止状态
*/
.v-enter,
.v-leave-to {
  opacity: 1;
  transform: translateX(150px);
}
/* 
v-leave-active 离场动画的时间段
v-enter-active 入场动画的时间段
*/
.v-leave-active,
.v-enter-active {
  transition: all 0.8s ease;
  opacity: 0.5;
}

/* ---------- */
/* my  自定义名称 区分不同组动画  */

/* 
v-enter 动画进入之前 此时还没开始进入
v-leave-to离开之后 终止状态
*/
.my-enter,
.my-leave-to {
  opacity: 1;
  transform: translateY(150px);
}
/* 
my-leave-active 离场动画的时间段
my-enter-active 入场动画的时间段
*/
.my-leave-active,
.my-enter-active {
  transition: all 0.8s ease;
  opacity: 0.5;
}
</style>