不透明度遷移が2つの固定位置要素で機能しない

Question

私のウェブサイトでは、YouTubeスタイルのプログレスバー（画面の上部に固定された細い線、左から右に読み込まれる）とすべてのコンテンツ。これらの要素の両方はposition: fixedです。

ページの読み込みが完了すると、プログレスバーはopacity: 0になります。プログレスバーにはtransition: opacity 0.4sがありますが、は移行していません。表示されて消えているのはです。これは私の問題です。ここで

が問題の一例です：https://codepen.io/anon/pen/ZJNaqJ

理想的には、任意の解決策は.loader-outerまたは.loaderのいずれかの中にCSSを変更する伴うだろう...ではない#loader-wrapper。これは、私が外部のプログレスバーコンポーネント（Reactを使用しています）を引っ張っているためであり、必要がなければ再実装したくないからです。

ありがとうございました！

Answer 1

代わりに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>