平滑动画背景颜色不透明度后，基础图像加载

Smoothly animate background color opacity after underlying image loads

本文关键字：图像 加载 动画 背景 颜色 不透明度 平滑      更新时间：2023-09-26

我有一个黑色背景的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(https://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(https://i.stack.imgur.com/MxR09.png)');
}, 1000)
 var outerdiv = $('.outerdiv');
  setTimeout(function() {
    outerdiv.addClass('outerdiv-opaque');
  }, 500);

我会使用像这样的pseudo，它将保持您的标记不变，并且由于opacity在pseudo上，它不会影响任何其他元素。

我没有使用脚本，而是在动画上使用了一个额外的步骤，在那里我告诉它保持opacity为1直到动画时间的60%，然后它应该开始褪色。

.outerdiv {
  position: relative;
  height: 500px;
  width: 500px;
  color: white;
  background: url(https://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>

实际上有十几种方法可以做到这一点。这里有四个基本的例子，可以顺利地工作。

使用CSS过渡

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(https://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/

使用CSS动画

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(https://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属性消除了setTimeout的需要)

查看效果: https://jsfiddle.net/kmm8e0x7/7/

使用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(https://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/

使用jQuery

HTML:同上

CSS:同上

JS: 

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

在行动: https://jsfiddle.net/kmm8e0x7/5/

相关文章：