두 고정 위치 요소로 불투명도 전환이 작동하지 않습니다.

Question

내 웹 사이트에는 YouTube 스타일 진행 표시 줄 (왼쪽에서 오른쪽으로로드되는 화면 상단에 고정되는가는 선)과 내용. 이 두 요소는 모두 position: fixed입니다.

페이지로드가 완료되면 진행률 막대는 opacity: 0이됩니다. 진행률 막대에 transition: opacity 0.4s이 있지만 전환되지 않고 표시되고 사라집니다.. 이것은 내 문제입니다. https://codepen.io/anon/pen/ZJNaqJ

가 이상적으로, 어떤 솔루션 .loader-outer 또는 .loader ...하지 #loader-wrapper 중 하나 내에서 CSS를 변경 포함합니다 : 여기

이 문제의 예입니다. 이것은 외부 진행률 표시 줄 구성 요소 (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>