不透明度转换不适用于两个固定位置元素

在我的网站中，我有一个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

不透明度转换不适用于两个固定位置元素

回答

相关问题