不透明度轉換不適用於兩個固定位置元素

在我的網站中，我有一個YouTube風格的進度條（一條固定在屏幕頂部的細線，從左到右加載）和一個標題內容。這兩個元素都有position: fixed。不透明度轉換不適用於兩個固定位置元素

頁面加載完成後，進度條得到opacity: 0。進度條有transition: opacity 0.4s，但它沒有轉換，只是出現和消失。這是我的問題。

這是問題的一個例子：https://codepen.io/anon/pen/ZJNaqJ

理想的情況下，任何解決方案將涉及要麼.loader-outer或.loader ...不是#loader-wrapper內改變CSS。這是因爲我正在使用外部進度條組件（我正在使用React），如果不需要，我寧願不重新實現它。

謝謝！

2017-09-06 camden

您可以改用css3動畫。如果要在特定事件中觸發動畫，請添加樣式類名稱並在其中設置動畫屬性。然後刪除樣式類名稱以停止動畫。

.wrapper { 
 
    width: 800px; 
 
    height: 400px; 
 
    background-color: lightblue; 
 
} 
 

 
.header { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: palevioletred; 
 
    z-index: 1; 
 
    height: 50px; 
 
} 
 

 
.loader-outer { 
 
} 
 

 
.loader-wrapper { 
 
} 
 

 
.loader { 
 
    background-color: lightpink; 
 
    height: 10px; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 100; 
 
    animation-name:opacityAnimation; 
 
    animation-iteration-count: infinite; 
 
    animation-duration:2s; 
 
} 
 

 
@keyframes opacityAnimation { 
 
    0% {opacity:0;} 
 
    50% {opacity:1;} 
 
    100% {opacity:0;} 
 
} 
 

 
.content { 
 
    background-color: lightgreen; 
 
}

<div class="wrapper"> 
 
    <div> 
 
    <div class="header"> 
 
     header stuff here 
 
    </div> 
 

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

 
    <div class="loader-outer"> 
 
    <div id="loader-wrapper"> 
 
     <div class="loader"></div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-09-06 22:10:58 jfeferman

不透明度轉換不適用於兩個固定位置元素

回答

相關問題