底层图像加载后平滑设置背景颜色不透明度的动画

Question

I have a div with a black background. When my page loads, I make a call for an image and then load that image into a div behind the main div . Then I want to smoothly fade the overlaying div to have an opacity so that the image underneath is displayed, but without impacting the opacity of content in the overlaying div .

What I have isn't really working at all: https://jsfiddle.net/n7t2xmha/3/

• The animation is not smooth
• The opacity is not accurate
• The text does not stay solid

Code:

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

Answer 1

Separate the timeouts functions. modify the .outerdiv-opaque class

   .outerdiv-opaque {
      background-color: white;
    }

your timeOut functions after separating would look like this

    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);

Answer 2

I would use a pseudo, like this, which will keep your markup as is and as the opacity is on the pseudo it won't effect any other element.

Instead of a script, I used an extra step on the animation, where I told it to keep its opacity at 1 up until 60% of the animation time before it should start to fade.

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

Answer 3

There are literally a dozen ways to do this. Here are four basic examples which work smoothly.

Using CSS Transitions

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);

See it in action: https://jsfiddle.net/kmm8e0x7/8/

---

Using CSS Animation

HTML: same as above

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: none ( animation-delay property removes the need for setTimeout )

See it in action: https://jsfiddle.net/kmm8e0x7/7/

---

Using JavaScript

HTML: as above

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);

See it in action: https://jsfiddle.net/kmm8e0x7/6/

---

Using jQuery

HTML: same as above

CSS: same as above

JS:

$('.outerdiv').animate({
  'opacity': '0'
}, 500);

See it in action: https://jsfiddle.net/kmm8e0x7/5/