javascript - 单击时交叉淡入淡出图像过渡

Question

我有一个非常简单的 HTML 页面，只有一个图像和一个按钮。这个想法是，当单击按钮时，图像会更改为另一个图像。

目前，我已经成功地通过使用以下 javascript 单击按钮来更改图像:

document.getElementById("img").src="img2.jpg";

但是，我想知道是否有一些简单易行的方法可以像过渡一样进行更改，例如两个图像之间的淡入淡出，仅使用 javascript 和 css。

Answer 1

可以分步进行:

1. 在原始图像的相同位置创建一个 img 元素。
2. 增加所述元素的 z-index
3. 隐藏元素
4. 将元素添加到 DOM 中
5. 慢慢淡入视野。

请参阅下面的工作片段:

SOLN 1:使用纯 Javascript 和 filter: alpha，即使是像 IE-5+ 这样的旧浏览器也没有 CSS3:

function act() {
  var element = document.createElement("img");
  element.src = "http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg";
  var op = 0.1; // initial opacity
  element.style.opacity = op;
  document.body.appendChild(element);
  element.style.display = 'block';
  var timer = setInterval(function() {
    if (op >= 1) {
      clearInterval(timer);
    }
    element.style.opacity = op;
    element.style.filter = 'alpha(opacity=' + op * 100 + ")"; // IE 5+ Support
    op += op * 0.1;
  }, 50);
}

img {
  position: absolute;
  top: 30px;
  left: 0px;
  width: 300px;
  height: 300px;
}

<button onclick='act()'>FADE CHANGE</button>
<br />
<img id="img" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/287.jpg">

SOLN 2:用于 IE10+、Chrome 26+、Fx 16+、Op 12.1+ 的带有 CSS3 转换的备用 soln:

var element = document.createElement("img");
element.src = "http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg";
document.body.appendChild(element);
element.style.opacity = 0;
element.style.transition = "opacity 1s";

function act() {
  element.style.opacity = 1;
}

img {
  position: absolute;
  top: 30px;
  left: 0px;
  width: 300px;
  height: 300px;
}

<button onclick='act()'>FADE CHANGE</button>
<br />
<img id="img" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/287.jpg">

注意:我无法在 IE 6 等非常旧的浏览器中进行实际测试，但理论上应该运行良好。如果您发现差异，请发表评论。