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

代码预览

我在使用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);
  }

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

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

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

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

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

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

我上面有代码的链接…

问题在于有一瞬间没有应用到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;
}
应该只需要在leave-from添加上就能解决

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

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

关 中途 开
.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 导致动画中断了

哦哦,刚开始没注意有 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 状态,而进入时并没有这个额外操作。

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

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

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

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