代码预览

顺晟科技：

哦哦，刚开始没注意有 demo 链接，我重新回答一下

emmm…不能编辑帖子了，突然发现有个Get-Help分类

如果你用 vue3，则使用 .zoom-enter-from

我在使用transition组件时遇到了过渡的问题。显示/隐藏的过渡有点不一样例如使用<transition name="zoom" ><div v-show="...">：

建议直接永久应用transition，就像这样

关 中途 开.zoom-leave-active → .zoom-enter-active我想是因为使用 v-show 切换元素显隐，元素并未删除再重新创建，并猜测 .zoom-enter-from 只会在元素创建后的一帧应用，所以根本没在这二者之间的一帧应用 .zoom-enter-from，故动画是连续的。

本来想用什么办法"一劳永逸"的解决一下(指元素不需要一直应用上transition)…虽然也挺没必要的

是显示途中再次点击使它隐藏时出现的，相当于是before enter → enter → enter cancel

在离开时，调用了 forceReflow()，强制元素回到 leave-from 状态，而进入时并没有这个额外操作。

也许是这些过渡类在添加机制上有些差异

如果你用 vue2，把 .zoom-enter-from 替换为 .zoom-enter

这好理解，想要元素从某个状态离开，而不是从当前状态离开。可能处理略有瑕疵，应在调用前加判断，如果是在进入中途离开，则不调用。

我也去看了下源码，只能说不是很理解为什么要这样做，毕竟我自己 感觉 通常来说进入的完成状态就是离开的起始状态…总感觉没什么必要…

最近事情有点多把这玩意儿给忘了

一直给上transition没什么不好的，浏览器还可以提前做好准备，最好也把transition-property写上

为什么会是两种不同的情况呢 — 时间短的话看不出来，只是想知道原因

demo 没体现出来，按现在的样式设置。显示时，元素从扁逐渐展开；隐藏时，元素变扁。没什么问题 另: demo 里 transitions 应为 transition

我其实更想知道为什么会造成这个情况，并且同样的操作却只有一个方向有这问题，有这问题的话两个不是都应该有嘛(感觉上)

这种效果是特意为之的，具体看源码

我大概知道你所说的“复原样式”的意思了，是你的 Vue 版本的问题

开 中途 关.zoom-enter-active → .zoom-leave-from → .zoom-leave-active这两者之间有一帧用于应用 .zoom-leave-from，缺少 transition 导致动画中断了

问题在于有一瞬间没有应用到transition，代码改为以下即可

我上面有代码的链接…