變換時轉換將不起作用：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與不透明度組合

回答

相關問題