不透明度转换不适用于两个固定位置元素
问题描述:
在我的网站中,我有一个YouTube风格的进度条(一条固定在屏幕顶部的细线,从左到右加载)和一个标题内容。这两个元素都有position: fixed
。不透明度转换不适用于两个固定位置元素
页面加载完成后,进度条得到opacity: 0
。进度条有transition: opacity 0.4s
,但它没有转换,只是出现和消失。这是我的问题。
这是问题的一个例子:https://codepen.io/anon/pen/ZJNaqJ
理想的情况下,任何解决方案将涉及要么.loader-outer
或.loader
...不是#loader-wrapper
内改变CSS。这是因为我正在使用外部进度条组件(我正在使用React),如果不需要,我宁愿不重新实现它。
谢谢!
答
您可以改用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>