javascript - 如何使图像淡入淡出过渡？

Question

我有一个生成随机数的脚本，这样当 setImg();被称为随机选择的图像出现:

<img src="" id="imgRand" alt="">


      function setImg(){
          var numRand = Math.floor(Math.random()*(6 - 1 + 1)) + 1;
          document.getElementById("imgRand").src = "images/"+numRand+".jpg";

      }

一切正常，但当图像发生变化时，它只是“出现”。我想知道是否有任何方法可以让它从一个淡入另一个？我在网上找到的所有内容都与在每个单独的图像上设置样式有关，但是由于我使用这个随机数字脚本来获取我的图像，所以我想不出一种方法来适应这些解决方案中的任何一个。

非常感谢任何帮助，谢谢!

Answer 1

我将使用 CSS3 transitions 为您提供示例.您可以根据您的具体情况对其进行调整和改进。

我的具体示例仅适用于自 implementation of the transcription end callback is vendor dependent 以来编写的 Webkit。 .您可以使用正确的 vendor 事件处理程序名称来解决此问题。

/* Fades an element to given opacity */
var fade = function(opacity, fn) {
    this.addEventListener("webkitTransitionEnd", function end() {
        this.removeEventListener("webkitTransitionEnd", end);
        fn && fn.call(this);
    }, false);
    this.style.opacity = opacity;
};

/* Preloads an image */
var load = function(src, fn) {
    var self = this, $img = new Image();
    $img.onload = function() {
        fn && fn.call(self);
    };
    $img.src = src;
};

/* Steps:
 *   1. Fades out current image.
 *   2. Preloads next image.
 *   3. When loading of next image is complete, sets next image.
 *   4. Fades in.
 */
var $img = document.getElementById("imgRand");
/* Fades out */
fade.call($img, 0, function() {
    /* Get random dimensions */
    var height = Math.ceil(Math.random() * 100) + 100;
    var width = Math.ceil(Math.random() * 200) + 100;
    var src = "http://placehold.it/" + width + "x" + height;
    /* Preloading */
    load.call(this, src, function() {
        $img.setAttribute("src", src);
        /* Fades in */
        fade.call($img, 1);
    });
});

You can see it here.

img 元素的 -webkit-transition-duration 样式属性设置为 1s。

其中最复杂和被忽视的部分是图像预加载。因为，除非您预加载所有要使用的图像，否则动画不会流畅。但与此同时，检测何时加载图像并不是一件容易的事，而且我使用的方法是一种幼稚的方法，对于浏览器缓存中的图像很可能会失败。这个我就不细说了，大家可以搜索SO。

免责声明:太晚了。所以，我将把代码转储到这里，稍后再讲。如有疑问。