css - 转换 :translate3d combined with opacity 时转换不起作用

Question

在我的网站上，我有第二个标题，当用户向下滚动页面时，它会从顶部向下移动。原始标题绝对位于顶部，并在第二个向下滑动时滚动到看不见的地方。

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

我一直在尝试让第二个标题在用户滚动回顶部并且它滑出 View 时不可见。我一直在尝试使用 0 的不透明度值和 ease 值来执行此操作。问题是，我正在使用 transform:translate3d 来制作上滑/滑下效果的动画，但我无法同时获得 opacity 和 transform 在相同的 transition 规则中工作。

理想情况下，我希望以下内容能够工作，但由于某种原因它不会。

.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;
}

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

目前我不得不将它设置为 transition: all .3s 这意味着不透明度也会淡入和淡出，我想避免这种情况。

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

这是我的其余代码:

HTML

  <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>

CSS 网页, body { 高度:100%； 宽度:100%； margin :0； 填充:0；

.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;
}

jQuery jQuery(文档).ready(函数($) {

   $(window).scroll(function() {

        if ($(this).scrollTop() > 200) {

            $('body').addClass('header-dropdown');

        } else {

            $('body').removeClass('header-dropdown');

        }       

    });     

});

Answer 1

根据我的评论，您的 CSS 转换规则中有错字。 您不能转换单个转换组件。相反，使用 transition: transform 0.5s; 例如。

为了达到隐藏页眉立即出现的效果，在添加.header-dropdown时将不透明度的过渡持续时间设置为0s。为了实现转换完成后隐藏标题隐藏的效果，您将不透明度的转换延迟设置为使用的转换持续时间:

.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;
}

在这里查看您的固定 fiddle :https://jsfiddle.net/teddyrised/wbmm0kL7/3/

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