vue 动画基础

vue 动画基础

1. v-enter //这是一个时间点是进入之前，元素的起始状态，此时还没有开始进入。
2. v-leave-to //是动画离开之后，离开的终止状态，动画已结束。
3. v-enter-active //入场动画时间段
4. v-leave-active //离场动画时间段

示例
 	.v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(150px);
    }
    .v-enter-active,
    .v-leave-active{
      transition: all 0.8s ease;
    }
    //用transition标签包裹
    <transition>
      <h3 v-if="flag">这是一个H3</h3>
    </transition>

修改 v-前缀

	.xxx-enter,
    .xxx-leave-to {
      opacity: 0;
      transform: translateX(150px);
    }
<transition name="xxx">
</transition>