展开四个div以使它们依次打开

Question

当该页面加载四个div折叠时，您将在此页面上看到真正的超酷效果。

我不知道该怎么做。 我已经看到jQuery UI提供了折叠效果- 参见此处 ，但这并不是我真正想要的。

我还在这里查看了许多答案，但找不到任何答案可以回答我的特定问题。

任何人都可以提供有关如何执行此操作的任何指导。

我当前的代码在下面， 还有一个jsfiddle。

html

<div class="wrap">
  <div class="bg"></div>
  <div class="main-container artists">

    <div class="employee-box">
    </div>
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flipper">
        <div class="front employee-1">
          <!-- front content -->
        </div>
        <div class="back">
          <!-- back content -->
        </div>
      </div>
    </div>

    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flipper">
        <div class="front employee-2">
          <!-- front content -->
        </div>
        <div class="back">
          <!-- front content -->
        </div>
      </div>
    </div>

    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flipper">
        <div class="front employee-3">
          <!-- front content -->
        </div>
        <div class="back">
          <!-- back content -->
        </div>
      </div>
    </div>
  </div>

的CSS

body{
  height: 2000px;
}
.wrap {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/167792/mountains_copy.jpg') no-repeat center center;
  background-size: cover;
  transform: scale(1.1);
}

.employee-box {
  background-color: red;
  height: 250px;
  width: 250px;
  float:left;
}

.employee-1 {
  background: yellow;
}

.employee-2 {
  background: pink;
}

.employee-3 {
  background: green;
}

/* entire container, keeps perspective */
.flip-container {
  perspective: 1000px;
  display: inline-block;
}

.container-border{
  border: 1px solid #ccc; 
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
  transform: rotateY(180deg);
}
.flip-container, .front, .back {
  width: 250px;
  height: 250px;
}

/* flip speed goes here */
.flipper {
  transition: 0.8s;
  transform-style: preserve-3d;
  position: relative;
}

/* hide back of pane during swap */
.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

/* front pane, placed above back */
.front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
  transform: rotateY(180deg);
  background-color: #fff;
}

Answer 1

这是一种入门的方法。 您将在此版本中看到所有转换都朝着同一方向翻转。 我的建议是在CSS中使用nth-child来定制每个翻转容器。 你必须与发挥transform-origin和旋转方向（ rotateX / rotateY ），使每个翻转似乎送入下。 我本可以走得更远，但想把剩下的乐趣留给您。

您会注意到，我添加了7行JavaScript，这是一种在每个容器上错开hover类的分配的简单方法。 另一种方法是在每个容器上使用transition-delay属性，使其看起来都按顺序翻转。 执行此操作的另一种方法是使用transitionend事件，在刚刚完成过渡的容器之后在容器上分配hover类。

最后，我选择了一个带有超时的简单循环。 这是你的选择。

 var flip_containers = document.querySelectorAll(".flip-container"), assignHover = function(container, index) { setTimeout(function() { container.classList.add("hover"); }, index * 350); }; [].forEach.call(flip_containers, assignHover); 

 -body{ height: 2000px; } .wrap { height: 100%; position: relative; overflow: hidden; } .bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/167792/mountains_copy.jpg') no-repeat center center; background-size: cover; transform: scale(1.1); } .employee-box { background-color: red; height: 250px; width: 250px; float:left; } .employee-1 { background: yellow; } .employee-2 { background: pink; } .employee-3 { background: green; } /* entire container, keeps perspective */ .flip-container { perspective: 1000px; display: inline-block; } .container-border{ border: 1px solid #ccc; } /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); } .flip-container, .front, .back { width: 250px; height: 250px; } /* flip speed goes here */ .flipper { transition: 0.8s; transform-style: preserve-3d; position: relative; } /* hide back of pane during swap */ .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } /* front pane, placed above back */ .front { z-index: 2; /* for firefox 31 */ transform: rotateY(0deg); } /* back, initially hidden pane */ .back { transform: rotateY(180deg); background-color: #fff; } 

 <div class="wrap"> <div class="bg"></div> <div class="main-container artists"> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front employee-1"> <!-- front content --> </div> <div class="back"> <!-- back content --> </div> </div> </div> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front employee-1"> <!-- front content --> </div> <div class="back"> <!-- back content --> </div> </div> </div> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front employee-2"> <!-- front content --> </div> <div class="back"> <!-- front content --> </div> </div> </div> <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front employee-3"> <!-- front content --> </div> <div class="back"> <!-- back content --> </div> </div> </div> </div> 

https://jsfiddle.net/kj06pf3a/