javascript - 如何加载一组初始图像，然后在不使用 jQuery 的情况下在它们之间随机设置动画

Question

在我的页面上，我有一个画廊(只是一个 div)，上面有几张图片。我想立即显示前 9 个图像，然后加载更多图像并使用 CSS 过渡在现有图像之间设置动画。

加载初始图像很容易，但我不知道加载下一组图像然后开始动画的最佳方法(使用 CSS Transform 属性)。到目前为止，这就是我所拥有的:

HTML(缩写):

<div id="mainContainer">
    <div class="imageHolder"><img class="homeImages" src="test.png"></div>
    <div class="imageHolder"><img class="homeImages" src="test1.png"></div>
    <div class="imageHolder"><img class="homeImages" src="test3.png"></div>
</div>

CSS(缩写):

img {
    display: inline;
    position: relative;
    margin: 0;
    padding: 0;
    width: 30%;
}

.changed.opaque {
    opacity: 0;
    border: 2px solid red;
}

我希望实现多种效果，最简单的一种是更改不透明度并使一张图像淡入另一张图像。要加载下一组图像，我有这样的:

Javascript:

    var imageArray = [
        'test2.png',
        'test3.png',
        'test4.png',
        'test5.png',
        'test6.png',
    ];
    var imageNodeArray = [];

    for(var i = imageArray.length - 1; i >= 0; i -= 1) {
        var img = new Image();
        img.onload = function() {
           imageNodeArray.push(this);
        };
        img.src = imageArray[i];
    }
    document.onclick = function() {
        imageNodeArray[0].setAttribute('class', 'changed.opaque');
        divs[0].appendChild(imageNodeArray[0])
    }

这确实将图像添加到我的 mainContainer 中，但是，即使我可以从 devTools 得知它应用了 changed.opaque 类，但没有显示不透明度在添加的图像上。

我对此很好奇。我还想知道“堆叠”图像以获得一堆动画的最佳方法。我不确定附加子项是否正确......谢谢

Answer 1

function animate() {
    var index = Math.floor((Math.random() * document.querySelectorAll('#mainContainer > .imageHolder').length + 1));
    var current = document.querySelector('.top');
    var next = document.querySelector('.imageHolder:nth-of-type(' + index + ')');
    current.className = "imageHolder";
    next.className += "top";
}

应该能够处理任何动态插入的图像并在它们之间切换。

当前使用:

.imageHolder {
    display: none;
}
.top {
    display: inherit;
}

切换图片只是一个简单的实现。

这是工作 fiddle :http://jsfiddle.net/e9dxN/1/

替代实现:http://jsfiddle.net/e9dxN/6/