Question

我有以下情况：我有一个元素.animated-container，默认情况下是不可见的。当它获得额外的.is-visible类时，元素会从顶部稍微移开而淡入。到目前为止这很好。现在我的问题是，退出动画应该没有轻微的移动到顶部，这当前导致我的元素跳跃。

输入转换如下所示：

.is-visible {
  transition: opacity .2s, margin-top .4s;
  opacity: 1;
  visibility: visible;
  margin-top: 0;
}

和退出转换如下：

.animated-container {
  /* ... */
  transition: opacity .2s, visibility .2s;
  margin-top: -60px;
  opacity: 0;
  visibility: hidden;
}

拥有这样的代码会使我的元素跳转，因为在移除margin-top类时.is-visible没有动画。

非常感谢你每一个即将到来的答案！

Answer 1

只需添加margin-top转换，延迟时间为其他动画的持续时间。

这样它会等待其他过渡完成，然后尝试margin-top（你不关心的，因为它已经不可见了。）

.animated-container{
    /*...*/
    transition: opacity .2s, visibility .2s, margin-top 0s .2s;
}

演示