变换时转换将不起作用：translate3d与不透明度组合

在我的网站上，当用户向下滚动页面时，我有第二个标题从顶端向下飘移。原始标题保持绝对位于顶部，并在第二个滑下时滚动到视线之外。变换时转换将不起作用：translate3d与不透明度组合

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

我一直在试图使第二个头不可见，当用户滚动回到顶部，它滑回视图。我一直在试图用不透明度值为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上的问题。注意，当对着视口/文档的边缘滚动时，第二个标题和导航菜单是可见的。

这里是我的代码的其余部分：

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 HTML，体{ 高度：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的（文件）。就绪（函数（$）{

$(window).scroll(function() { 

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

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

     } else { 

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

     }  

    });  

});

来源

2017-08-14 Jack1991

您应该过渡'transform'，而不是'translate'。 – Terry

按我的意见，你有一个错字在你的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

来源

2017-08-14 18:24:06 Terry

变换时转换将不起作用：translate3d与不透明度组合

回答

相关问题