Question

我想在Vanilla Javascript中使用 onscroll 制作动画。我有 2个班级。第一个是 .photography_box ，它是有效的，第二个是 .photography_box_active ，它是无效的。当我向下滚动到1500px时，我的第二课 .photography_box_active 开始播放，我的动画效果很好。我的 .photography_box 包含12个方框。当动画发生时，所有这些都在同一时间进入，这不是我想要的。我希望他们每个人都能一个接一个地进来。在jQuery中，我可以使用 $。each ，但我想使用Vanilla Javascript获得相同的效果。有人可以帮我解决问题吗？

由于

我班级的CSS代码：

.photography_box {
    overflow: hidden;
    position:relative;
    cursor: pointer;
    margin-bottom:20px;
    opacity: 0;
    cursor: pointer;
    -webkit-transform:translateX(-50px);
    transform:translateX(-50px);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.photography_box_active {
    opacity: 1;
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
}

JS代码是：

var photoBox = document.getElementsByClassName("photography_box");

window.onscroll = function() {
    loopBox()
};

function loopBox(){
if ( window.pageYOffset > 1500 ){
     for ( f = 0; f <= photoBox.length -1; f++ ) {
     photoBox[f].classList.add("photography_box_active");
        };
    };
};

Answer 1

您可以在循环中使用setTimeout来根据索引延迟每个项目的动画。所以，如果你想延迟150毫秒：

for ( f = 0; f < photoBox.length; f++ ) {
    setTimeout(function(){
        photoBox[f].classList.add("photography_box_active");
    }, 150 * f);
}

请注意，正如您事先知道的那样，当您使用css过渡时，这可以完全用css完成，保留现有的js代码。假设您的.photography_box项目位于.box容器

中

.box .photography_box:nth-child(1)  { transition-delay: 0    }
.box .photography_box:nth-child(2)  { transition-delay: 0.05s }
// and so on...

编写相当麻烦，特别是使用供应商前缀，但如果你使用像sass这样的css预处理器，那就没什么烦恼了

Answer 2

示例：array.forEach（callback [，thisArg]）

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

香草Javascript - 动画与不同的时间

2 个答案: