Question

我有一个标题栏，我希望在用户向下滚动页面时动画（使用CSS过渡）。我有想要排序的动画，但是当删除类时，边距似乎没有动画回到0（当标题被动画化为较小的版本时，请注意明显的跳转。）

有人能看到这个原因吗？据我所知，保证金应该转回0而没有任何问题。

HTML

<div id="top-background">
  <div class="sky-blue">

  </div>
</div>

CSS

body{
  margin: 0;
}

#top-background{
    margin-top: 0;
    transition: 2s height ease-in-out, 2s transform ease-in-out, 2s margin-top ease-in-out;
    height: 100px;
    background-color: #1a82c5;
    position: fixed;
    width: 100%;
    top: 0;
}

body.expanded-header #top-background{
    height: 500px;
    margin-top: -19.27083333333%;
    transform-origin: 100% 100%;
    transform: skewY(-10.9deg);
}

JSFiddle

（点击蓝色切换类）

Answer 1

将transform-origin添加到#top-background元素上似乎解决了这个问题。

JSFiddle

当删除一个类时，边距似乎没有动画

1 个答案: