Question

我有一系列在div中“堆叠”的图像。我希望通过CSS转换在这些图像（不使用jQuery）之间转换（交叉淡入淡出）。我不知道该怎么做是在图像之间无休止地过渡。图像是通过JSON Feed动态添加的，它们将继续添加，因此divs中的图像数量未设置。

我正在考虑使用z-index将图像置于彼此之上（然后为opacity和其他属性设置动画）的方法，但如果我想通过4张照片制作动画，我不是确定如何跟踪z-index和不透明度设置，以了解哪些显示。这是我到目前为止所提出的内容，但我会对人们如何在可能未知数量的图像中循环并跟踪“显示”内容感兴趣。基本上，我现在在图像上设置了一个简单的CSS Transition，并通过添加和删除类来动画，我希望能够创建一个遍历图像的循环，更改z-index和一些属性，以及然后将其发送到小组的后面。

HTML

//Example div (on my page there are many of these)
<div class="imageHolder">
    <div class="imageContent">
       <img class="homeImages" src="media/test.png">
       <img class="homeImages" src="media/test1.png">
       <img class="homeImages" src="media/test2.png">
    </div>
</div>

CSS

 div.imageHolder {
        float: left;
        position: relative;
        width: 32.9%;
        padding-bottom: 18.6%;
        margin-right: .1em;
    }

    div.imageContent {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
    }

    div img {
        width: 100%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1
    }

    div img.newImage {
        z-index: 2;
        opacity: 0;
    }

    div img.live {
        z-index: 3;
        opacity: 1;
        transition: opacity 1s ease-in;
    }

的Javascript

    function select() {
        var x = Math.floor(Math.random() * divs.length);
        if(divs[x].children.length > 1) {
            var live = document.querySelector('div img.live');
            var old = document.querySelector('div img.newImage');
            live.className = 'newImage';
            old.className += ' live';
        }
    }

Answer 1

你需要js，至少要跟踪哪个是当前图像并添加一个触发css转换的类。

如果我理解正确，你几乎已经明白了。试试这个

function select() {
    var x = Math.floor(Math.random() * divs.length),
        current = document.querySelector('.imageContent img.live'),
        newOne = document.querySelectorAll('.imageContent img')[x];

    current.className = ''; // clear the .live class
    newOne.className = 'live'; 
    // this triggers the css transition

    setTimeout(select, 1000); // after the css transition ends, do this again
}

将css更改为

div img {
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* moved .newImage styles here as a default */
    z-index: 2;
    opacity: 0;
}

如何通过堆叠图像动画Javascript

1 个答案: