如何使用CSS和JavaScript動畫X數量的div？

Question

我真的很喜歡這個代碼示例：

<div class="container"> 
    <div class="box fade-in one"> 
    look at me fade in 
    </div> 

    <div class="box fade-in two"> 
    Oh hi! i can fade too! 
    </div> 

    <div class="box fade-in three"> 
    Oh hi! i can fade three! 
    </div> 
</div> 

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300); 

body {padding: 0; margin: 0; background-color: #333;} 

.container {position: fixed; top: 25%; left: 25%;} 

/* make keyframes that tell the start state and the end state of our object */ 
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } } 

.fade-in { 
    opacity:0; /* make things invisible upon start */ 
    -webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ 
    -moz-animation:fadeIn ease-in 1; 
    animation:fadeIn ease-in 1; 

    -webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ 
    -moz-animation-fill-mode:forwards; 
    animation-fill-mode:forwards; 

    -webkit-animation-duration:1s; 
    -moz-animation-duration:1s; 
    animation-duration:1s; 
} 

.fade-in.one { 
    -webkit-animation-delay: 0.7s; 
    -moz-animation-delay: 0.7s; 
    animation-delay: 0.7s; 
} 

.fade-in.two { 
    -webkit-animation-delay: 1.2s; 
    -moz-animation-delay:1.2s; 
    animation-delay: 1.2s; 
} 

.fade-in.three { 
    -webkit-animation-delay: 1.6s; 
    -moz-animation-delay: 1.6s; 
    animation-delay: 1.6s; 
} 

/*---make a basic box ---*/ 
.box{ 
    width: 200px; 
    height: 200px; 
    position: relative; 
    margin: 10px; 
    float: left; 
    border: 1px solid #333; 
    background: #999; 

} 

問題時，每個 「盒子」，它要求 「fade1」， 「fade2」， 「fade3」 來定義。有什麼方法可以定義一個我可以傳入的函數，例如5，它會創建5個帶有適當交錯動畫的淡色框？這樣一來，我沒有在.fade-in.one硬編碼到.fade-in.five

Answer 1

您可以用JavaScript創建的幫助，這樣的效果：

document.addEventListener('DOMContentLoaded', function() { 
 
    var generateBoxesAndAnimate = function(where, boxes) { 
 
    for (var i = 1; i <= boxes; i++) { 
 
     var box = document.createElement('div'); 
 
     box.className = 'box fade-in'; 
 
     box.style.webkitAnimationDelay = i * 0.7 + 's'; 
 
     box.style.mozAnimationDelay = i * 0.7 + 's'; 
 
     box.style.animationDelay = i * 0.7 + 's'; 
 
     document.getElementById(where).appendChild(box); 
 
    } 
 
    }; 
 

 
    generateBoxesAndAnimate('container', 5); // where to append, number of boxes 
 
}, false);

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300); 
 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
    background-color: #333; 
 
} 
 
.container { 
 
    position: fixed; 
 
    top: 25%; 
 
    left: 25%; 
 
} 
 
/* make keyframes that tell the start state and the end state of our object */ 
 

 
@-webkit-keyframes fadeIn { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 
@-moz-keyframes fadeIn { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 
@keyframes fadeIn { 
 
    from { 
 
    opacity: 0; 
 
    } 
 
    to { 
 
    opacity: 1; 
 
    } 
 
} 
 
.fade-in { 
 
    opacity: 0; 
 
    /* make things invisible upon start */ 
 
    -webkit-animation: fadeIn ease-in 1; 
 
    /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ 
 
    -moz-animation: fadeIn ease-in 1; 
 
    animation: fadeIn ease-in 1; 
 
    -webkit-animation-fill-mode: forwards; 
 
    /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ 
 
    -moz-animation-fill-mode: forwards; 
 
    animation-fill-mode: forwards; 
 
    -webkit-animation-duration: 1s; 
 
    -moz-animation-duration: 1s; 
 
    animation-duration: 1s; 
 
} 
 
/*---make a basic box ---*/ 
 

 
.box { 
 
    width: 200px; 
 
    height: 200px; 
 
    position: relative; 
 
    margin: 10px; 
 
    float: left; 
 
    border: 1px solid #333; 
 
    background: #999; 
 
}

<div class="container" id='container'> 
 
</div>

Answer 2

你可以做到這一點使用一些Javascript代碼如下：

var n = 5; // Number of divs to add 
var timeout; 

var addDiv = function() { 
    var newDiv = document.createElement("DIV"); 
    newDiv.className = 'box fade-in'; 
    newDiv.innerText = 'New div'; 
    var container = document.getElementsByClassName("container")[0]; 
    container.appendChild(newDiv); 
}; 

for (var i = 0; i < n; i++) { 
    timeout = 1000 * i; // display every second a new div 
    setTimeout(addDiv, timeout); 
} 

見JSFiddle example