Transition过渡中关于样式复原的问题

中文
#1

代码预览

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

  • 在隐藏到显示的途中再去隐藏时会复原样式进行过渡
  • 在显示到隐藏途中的再去显示却是以之前过渡的状态开始进行过渡。

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

  .zoom-enter-active,.zoom-leave-active{
    transitions:opacity 1s,transform 1s;
  }
  .zoom-enter-from,.zoom-leave-to{
    opacity:0;
    transform: scaleX(0);
  }
#2

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

#3

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

#4

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

#5

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

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

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

#6

我上面有代码的链接…

#7

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

.zoom-enter-active,
.zoom-leave-active {
    transition-property: transform, opacity;
    transition-duration: 1s;
}
.zoom-enter-to,
.zoom-leave-from {
    transition-property: transform, opacity;
    transition-duration: 1s;
    opacity: 1;
    transform: scaleX(1);
}
.zoom-enter-from,
.zoom-leave-to {
    opacity: 0;
    transform: scaleX(0);
}

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

.zoom-enter-to,
.zoom-leave-from {
    opacity: 1;
    transform: scaleX(1);
}

.zoom-enter-from,
.zoom-leave-to {
    opacity: 0;
    transform: scaleX(0);
}
  
.transition-box {
    transition-property: transform, opacity;
    transition-duration: 1s;
}
#8
应该只需要在leave-from添加上就能解决

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

#9

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

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

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

#10

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

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

// packages/runtime-dom/src/components/Transition.ts#L230

onLeave(el, done) {
  // force reflow so *-leave-from classes immediately take effect (#2593)
  forceReflow()
}

// synchronously force layout to put elements into a certain state
export function forceReflow() {
  return document.body.offsetHeight
}

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

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

#11

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

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

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