香草豆JavaScript - 動畫與不同的時間

我想使用在谷歌JavaScript中的動畫。我有2類。第一個是.photography_box它處於活動狀態，第二個是.photography_box_active未激活。當我滾動到1500px我的第二類.photography_box_active踢，我的動畫效果很好。我的.photography_box由12個盒子組成。當動畫發生時，所有的人都在同一時間進來，這不是我想要的。我希望他們中的每一個都能一個接一個地進來。在jQuery我可以使用$。每個，但我想用香草Javascript有相同的效果。有人可以幫我解決問題嗎？香草豆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"); 
     }; 
    }; 
};

來源

2016-04-13 NoName84

你能使用'的setTimeout（）'耽誤'photography_box_active'類的補充？ – brso05

我已經嘗試過，但它只是延遲，而且一切都在一起。我希望每個人都有不同的時間。 – NoName84

'setTimeout（）'應該工作...請發佈你已經嘗試過。 – brso05

您可以使用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...

相當繁瑣寫，尤其是與供應商的前綴，但沒有惱人的，如果你使用的是CSS預處理像青菜

來源

2016-04-13 15:07:51 VonD

感謝您的回覆VonD我已經嘗試了您所寫的內容，但似乎並未出於某種原因。你會把什麼放在 - 延遲* f - 。我嘗試過使用150 *（f + 1），但它現在的工作可以用延遲設置一個完整的例子* f請 – NoName84

@ NoName84我的意思是'延遲'是一個變量，它保存你想要延遲的毫秒數適用於每個項目。我已經更新了我的答案。這種方式更清楚嗎？ – VonD

現在是它的工作感謝您的幫助和CSS的提示。 – NoName84

例子：array.forEach（回調[，thisArg]）

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

來源

2016-04-13 15:22:32

香草豆JavaScript - 動畫與不同的時間

回答

相關問題