javascript - 如何使用 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>