javascript - CSS 不透明度过渡，使其真正线性

Question

<分区>

Answer 1

这与缓动没有任何关系，这是因为您不必要地过渡了两个元素。

很容易将其过于复杂化——而是将两张图片想象成一堆:底部的一张可以一直保持可见，只有顶部的一张需要淡入和淡出。

比较如下:

goodswap = function() {
  $('#div2').fadeToggle(); // transitions the top element in and out
}

badswap = function() {
  $('#div1, #div2').fadeToggle(); // transitions both elements in and out
}

.block-div {
  position: absolute;
  height: 200px;
  width: 400px;
  color: #fff;
  font-size: 40px;
  text-align: center;
}
.container { position: relative }
#div1 { background-color: red;}
#div2 { background-color: brown; display: none;}
#div3 { background-color: blue }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<button onclick="goodswap()">Good fade</button>
<button onclick="badswap()">Bad fade</button>

<div class="container">
  <div class="block-div" id="div3">(This is the page background)</div>
  <div class="block-div" id="div1">1</div>
  <div class="block-div" id="div2">2</div>
</div>

如果图像大小不同，只要将较大的图像与较高的 z-index 堆叠在一起，此技术仍然有效。要防止页面的其余部分跳来跳去，请将容器的大小设置为较大图像的大小。

goodswap = function() {
  $('#div2').fadeToggle(); // transitions the top element in and out
}

badswap = function() {
  $('#div1, #div2').fadeToggle(); // transitions both elements in and out
}

.block-div {
  position: absolute;
  height: 200px;
  width: 400px;
  color: #fff;
  font-size: 40px;
  text-align: center;
}
.container { position: relative }
#div1 { background-color: red;}
#div2 { background-color: brown; width: 500px; display: none;}
#div3 { background-color: blue }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<button onclick="goodswap()">Good fade</button>
<button onclick="badswap()">Bad fade</button>

<div class="container">
  <div class="block-div" id="div3">(This is the page background)</div>
  <div class="block-div" id="div1">1</div>
  <div class="block-div" id="div2">2</div>
</div>