转换时，转换不起作用：translate3d与不透明度相结合

Question

在我的网站上，当用户向下滚动页面时，我有第二个标题从顶部向下漂移。原始标题保持绝对位于顶部，并在第二个向下滑动时滚动显示。

由于Google Chrome反弹滚动效果，如果用户在浏览器已经位于页面顶部时向上滚动，则他们可以看到文档外部的第二个标题。这看起来很奇怪，它只发生在Chrome中。

当用户滚动回到顶部时，我一直试图使第二个标题不可见，然后它会滑回视图之外。我一直尝试使用ease值设置不透明度值为0。问题是，我正在使用transform:translate3d来设置上滑/下滑效果的动画，我无法同时使opacity和transform同时工作{{1}规则。

理想情况下，我希望以下内容有效，但不会出于某种原因。

transition

这是一个jsFiddle，向您展示我的意思 - https://jsfiddle.net/wbmm0kL7/2/

目前我不得不将其设置为.hidden-header { position:fixed; transform:translate3d(0,-100%,0); background-color:red; width:100%; height:55px; opacity:0; transition: translate 0.3s, opacity 0s ease .3s; } body.header-dropdown .hidden-header { transform:translate3d(0,0,0); opacity:1; transition: translate .5s, opacity 0s; } ，这意味着不透明度也会逐渐消失，这是我想要避免的。

以下是我的网站上的图片，其中包含我正在尝试解决的Chrome问题。请注意，当滚动视口/文档的边缘时，第二个标题和导航菜单是可见的。

以下是我的其余代码：

HTML     

transition: all .3s

CSS     HTML，     身体 {       高度：100％;       宽度：100％;       余量：0;       填充：0;     }

  <header class="header">REGULAR HEADER</header>
  <div class="transform-container">
      <div class="hidden-header">HIDDEN HEADER (SLIDES DOWN ON SCROLL)</div>
  </div>

  <div class="content"></div>

</div>

的jQuery     jQuery（document）.ready（function（$）{

.wrapper {
  background-color:orange;
  min-height:100%;
}

.header {
  position:absolute;
  width:100%;
  height:55px;
  background-color:pink;
}

.hidden-header {
  position:fixed;
  transform:translate3d(0,-100%,0);
  background-color:red;
  width:100%;
  height:55px;
  opacity:0;
  transition: all .3s;
}

body.header-dropdown .hidden-header {
  transform:translate3d(0,0,0);
  opacity:1;
  transition: all .5s;
}

.content {
  height:2000px;
}

Answer 1

根据我的评论，你的CSS转换规则中有一个拼写错误。 您无法转换单个转换组件。相反，请使用transition: transform 0.5s;作为示例。

要实现立即显示隐藏标题的效果，请在添加.header-dropdown时将不透明度的过渡持续时间设置为0。要在转换完成转换后实现隐藏标头隐藏的效果，请将不透明度的转换延迟设置为使用的转换持续时间：

.hidden-header {
  position:fixed;
  transform:translate3d(0,-100%,0);
  background-color:red;
  width:100%;
  height:55px;
  /* Delay opacity transition when returning to ground state */
  transition: transform 0.5s, opacity 0s 0.5s;
  opacity: 0;
}

body.header-dropdown .hidden-header {
  transform:translate3d(0,0,0);
  opacity: 1;
  transition: transform 0.5s 0s, opacity 0s;
}

在此处查看您的固定小提琴：https://jsfiddle.net/teddyrised/wbmm0kL7/3/

请注意，转换速记的第一个数值始终为transition-duration，而第二个数值为transition-delay