Vue 的 transition & 实现路由类 Tab 左右滑动切换的效果

Vue 的 transition & 实现路由类 Tab 左右滑动切换的效果

先说下 transition 为什么可以让你定义了 v-enter, v-enter-active 之后就可以触发transition.
实际过程按我的理解应该是这样:

1. 最开始的时候, 先给元素加上了 v-enter, v-enter-active 两个class

2. 在下一帧的时候, 删掉 v-enter 这个class.

3. 在过渡结束之后, 再删掉 v-enter-active.

对于2的解释:

• 这个帧的概念我刚开始没理解, 但是实际上可以理解成 '一段时间之后';

• 你删掉 v-enter 会导致什么情况?
  元素的样式会变化

那么元素现在只有定义在自己身上的样式了
所以要变回去
然后发现有定义在 v-enter-active 上面的过渡效果
就会应用过渡效果

复盘一下过程:
刚开始的时候, 元素有自己的样式, 有 v-enter, v-enter-active 中定义的样式.
在一段时间间隔, 比如说 100ms 之后, 删掉了 v-enter, 意味着元素的样式变化。
变化, 然后发现存在 transition的定义, 就应用 transition,
这就形成了我们最终看见的 transition效果.

给个demo:

.box {
  height: 100px;
  width: 100px;
  background: red;
}
.v-enter {
  height: 200px;
  width: 200px;
}
.v-enter-active {
  transition: all 2s;
}<