今天早上看了这个主题,正好最近也用了很多次 Vue 过渡,于是我就做了些实验。
上面的代码想实现的效果很简单:进入和离开有相同的过渡效果,即 font-size 在 2 秒内从 120px 变为 6px, 过渡完成后回到默认值。进入的过渡效果符合预期,但是离开的过渡,很明显漏掉了一开始的 120px,直接从默认大小向 6px 过渡。
这是否是 Vue 的 BUG ?如果不是 Vue 的 BUG,请指出我的错误。
(注意: 如果不确定代码是否有错误,请不要修改代码)
1
redbuck 2019-07-25 14:02:25 +08:00
已修改.
进入,离开一致,那就可以直接合并 |
2
noe132 2019-07-25 14:05:08 +08:00
v-leave-active 和 v-leave 是同时被添加上去的,然后在一瞬间后被换成 v-leave-to
当 v-leave 与 idle 时的状态不同时,因为在 v-leave-active 添加了 transition 效果,所以字体会有变成 120px 动画过程,但是在一瞬间又被换成 v-leave-to,在字体还没来得及变成 120px,就又要求被变成 6px 把 transition 从 v-leave-active 换成 v-leave-to 就可以了 |
3
YuxiangLuo OP @noe132 "v-leave-active 和 v-leave 是同时被添加上去的,然后在一瞬间后被换成 v-leave-to"——这个过程我是了解的。如果对比 enter,enter 也是这样一个过程,但是 120px-->6px-->default size 这三个步骤是很清晰的。
官网的这张图也是在疯狂暗示我们,这两个过程是完全一致的 https://vuejs.org/images/transition.png |
4
YuxiangLuo OP 我现在只想找到一个 v-leave 真实起作用的例子,依稀记得以前写过,但是现在复现不了了。
|