课堂变换的进入和退出有不同的过渡

时间:2014-11-21 11:50:32

标签: css css3 css-transitions

我有以下情况:我有一个元素.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没有动画。

See my current code here

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

1 个答案:

答案 0 :(得分:2)

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

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

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

http://codepen.io/gpetrioli/pen/xbbavJ

演示