[英]Smoothly animate background color opacity after underlying image loads
我有一个黑色背景的div。 当我的页面加载,我拨打电话一个image
,然后是加载image
到一个div
的主要背后div
。 然后,我要平滑淡入淡出叠加div
以使其具有不透明度,以便显示下面的图像,但又不影响叠加div
中内容的不透明度。
我所拥有的根本无法工作: https : //jsfiddle.net/n7t2xmha/3/
码:
<div class="outerdiv">
<div class="innerdiv">
</div>
<p>
content - should remain solid white
</p>
</div>
.outerdiv {
background-color: black;
position: relative;
display: block;
height: 500px;
width: 500px;
color: white;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.outerdiv-opaque {
opacity: 0.9 !important;
}
.innerdiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index=-1;
}
JS
var innerDiv = $('.innerdiv');
setTimeout(function() {
innerDiv.css('background-image', 'url(http://i.stack.imgur.com/MxR09.png)');
var outerdiv = $('.outerdiv');
setTimeout(function() {
outerdiv.addClass('outerdiv-opaque');
}, 500);
}, 1000)
单独设置超时功能。 修改.outerdiv-opaque类
.outerdiv-opaque {
background-color: white;
}
分离后的timeOut函数如下所示
var innerDiv = $('.innerdiv');
setTimeout(function() {
innerDiv.css('background-image', 'url(http://i.stack.imgur.com/MxR09.png)');
}, 1000)
var outerdiv = $('.outerdiv');
setTimeout(function() {
outerdiv.addClass('outerdiv-opaque');
}, 500);
我将使用一个伪像这样,它将使您的标记保持不变,并且由于伪像的opacity
不会影响任何其他元素。
我在动画上使用了一个额外的步骤,而不是脚本,在该步骤中,我告诉它将opacity
保持为1,直到动画开始褪色之前的动画时间的60%。
.outerdiv { position: relative; height: 500px; width: 500px; color: white; background: url(http://i.stack.imgur.com/MxR09.png); } .outerdiv::before { content: ''; background-color: black; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.5; animation: fade 2s linear; } .innerdiv { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } p { position: relative; } @keyframes fade { 0% { opacity:1 } 60% { opacity:1 } 100% { opacity:0.5 } }
<div class="outerdiv"> <div class="innerdiv"> </div> <p> content - should remain solid white </p> </div>
实际上有十二种方法可以做到这一点。 这是四个可以顺利运行的基本示例。
HTML:
<div class="container">
<div class="outerdiv">
</div>
<div class="innerdiv">
</div>
<p>
content - should remain solid white
</p>
</div>
CSS:
.container,.outerdiv {
background-color: black;
position: relative;
display: block;
height: 500px;
width: 500px;
color: white;
}
.outerdiv,.innerdiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.outerdiv{
z-index:1;
transition: .5s opacity linear;
}
.innerdiv{
background-image: url(http://i.stack.imgur.com/MxR09.png);
}
.outerdiv.fadeout{
opacity:0
}
.container p{
position:relative;
z-index:3;
}
JS:
// wait 1 second, add the fadeout class, let the CSS do the rest
setTimeout(function(){
document.querySelector('.outerdiv').classList.add('fadeout')
},1000);
实际观看: https : //jsfiddle.net/kmm8e0x7/8/
HTML:与上述相同
CSS:
.container,.outerdiv {
background-color: black;
position: relative;
display: block;
height: 500px;
width: 500px;
color: white;
}
.outerdiv,.innerdiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.outerdiv{
z-index:1;
}
.innerdiv{
background-image: url(http://i.stack.imgur.com/MxR09.png);
}
.outerdiv{
animation: fadeout .5s linear forwards 1s;
/*
Which is shorthand for:
animation-name: fadeout
animation-duration: .5s;
animation-timing-function: linear
animation-fill-mode:forwards;
animation-delay: 1s
*/
}
.container p{
position:relative;
z-index:3;
}
@keyframes fadeout{
from{opacity:1}
to{opacity:0}
}
JS:无( animation-delay
属性消除了对setTimeout
的需求)
实际观看: https : //jsfiddle.net/kmm8e0x7/7/
HTML:如上所述
CSS:
.container,.outerdiv {
background-color: black;
position: relative;
display: block;
height: 500px;
width: 500px;
color: white;
}
.outerdiv,.innerdiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.outerdiv{
z-index:1;
transition: .5s opacity linear;
}
.innerdiv{
background-image: url(http://i.stack.imgur.com/MxR09.png);
}
.container p{
position:relative;
z-index:3;
}
JS:
var el = document.querySelector('.outerdiv');
function fadeout(){
el.style.opacity -= 0.01;
if(el.style.opacity !== 0){
requestAnimationframe(fadeout);
// this could just as easily be setTimeout(fadeout,t) where t = an increment of time after which to call the next frame
}
}
// just use setTimeout to wait for 1 second before starting the fadeout
setTimeout(fadeout,1000);
实际观看: https : //jsfiddle.net/kmm8e0x7/6/
HTML:与上述相同
CSS:同上
JS:
$('.outerdiv').animate({
'opacity': '0'
}, 500);
实际观看: https : //jsfiddle.net/kmm8e0x7/5/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.