La transition d'opacité ne fonctionne pas avec deux éléments de position fixe

Question

Sur mon site Web, j'ai une barre de progression de style YouTube (une fine ligne qui est fixée en haut de l'écran, chargement de gauche à droite) et un en-tête le contenu. Ces deux éléments ont position: fixed.

Lorsque la page est terminée de chargement, la barre de progression obtient opacity: 0. La barre de progression a transition: opacity 0.4s, mais n'est pas en cours de transition, apparaissant et disparaissant. C'est mon problème.

Voici un exemple de la question: https://codepen.io/anon/pen/ZJNaqJ

Idéalement, une solution consisterait à changer CSS dans les deux .loader-outer ou .loader ... pas #loader-wrapper. C'est parce que j'utilise un composant de barre de progression externe (j'utilise React) et je préférerais ne pas le ré-implémenter si je n'ai pas à le faire.

Merci!

Answer 1

Vous pouvez utiliser l'animation css3 à la place. Si vous souhaitez déclencher l'animation lors d'un événement spécifique, ajoutez un nom de classe de style et définissez les attributs d'animation. Ensuite, supprimez le nom de la classe de style pour arrêter l'animation.

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