使用CSS转换

Question

我有一个黑色背景的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)

Answer 1

分隔超时功能。修改.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);

Answer 2

我会使用像这样的伪，它将保持你的标记不变，并且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>

Answer 3

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

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

使用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(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属性不需要setTimeout）

查看实际操作： https://jsfiddle.net/kmm8e0x7/7/

使用JavaScript

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/

使用jQuery

HTML：与上述相同

CSS：与上述相同

JS：

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

查看实际操作： https://jsfiddle.net/kmm8e0x7/5/

在基础图像加载后平滑地为背景颜色不透明度设置动画

3 个答案:

使用CSS转换

使用CSS动画

使用JavaScript

使用jQuery