Vue中的transition组件

Vue 提供的transition组件可以为正在隐藏或显示的元素(包括了组件的卸载与挂载)添加过渡动画

在进入/离开的过渡中，会有 6 个 class 切换。

进入阶段

• v-enter-from 定义进入过渡的开始状态。在第一帧插入，第二帧移除
• v-enter-active 定义进入过渡生效时的状态。在第一帧插入，贯穿整个阶段
• v-enter-to 定义进入过渡的结束状态。在第二帧插入，贯穿整个阶段 离开阶段

持续时间和进入阶段一样，就不再写出了

• v-leave-from 定义离开过渡的开始状态。
• v-leave-active 定义离开过渡生效时的状态。
• v-leave-to 离开过渡的结束状态。

可以用下面两张图直观的来表示这几个状态的持续时间

特别注意，在vue2中开始状态为 v-leave/v-enter, 而在vue3中开始状态为 v-leave-from/v-enter-from

from—— 进入过渡的开始状态

可以看到，点击按钮后，方块立即出现在右侧，进入了过渡的开始状态, 下一帧 v-leave-from被移除， 所以方块就会回到原来的位置，因为添加了过度的生效状态，所以回到原来的位置这个过程会持续2s

/*离开的过渡动画*/
    .v-leave-from {
      transform: translateX(var(--offset-x));
    }

    .v-leave-active {
     /*过渡生效时的状态*/
      transition: 2s;
    }

active——过渡生效时的状态

    .v-leave-active {
      transform: translateX(var(--offset-x));
    }

    .v-leave-to {
      transition: 2s;
    }

from与active是有重叠区域的，不过from在第二帧就会被移除，上图中，active第一帧的表现和from一致，方块立即出现在右侧。不过active会持续整个过渡过程。

to——过渡的结束状态

我更愿意把它叫做过渡的剩余状态, 因为它的持续时间为第一帧后面的所有时间段。与active的重叠区域为第二帧到过渡结束。通过组合active阶段，可以定义渐出动画

    /*离开的过渡动画*/
    .v-leave-from {
      /*初始状态就待在原地好了*/
    }

    .v-leave-active {
      transition: 2s;
    }

    .v-leave-to {
      transform: translateX(var(--offset-x));
      opacity: 0;
    }

理解了v-leave-***就可以写出渐入动画。

    .v-enter-from {
      /*方块会出现在左边，并且opacity为0*/
      opacity: 0;
      transform: translateX(calc(var(--offset-x) * -1));
    }

    .v-enter-active {
      /*随后，v-enter-from被移除，由于添加了transition属性*/
      /*方块会表现为向右缓慢移动到默认位置*/
      transition: 1s cubic-bezier(.45, .46, .36, 1.32);
    }

    .v-enter-to {
      /* 最终状态也回到最初位置就好了 */
    }

某设计师说过，一个物体从一个地方消失，再次显示时就要让它从消失的地方回来，这样才符合人类的思维逻辑

.v-enter-from,
.v-leave-to {
  /* 进入开始的位置和离开结束的位置一样*/
  opacity: 0;
  transform: translateX(100px);
}

.v-enter-active,
.v-leave-active {
  transition: 1s cubic-bezier(0.45, 0.46, 0.36, 1.32);
}