翻转效果：逐个翻转div

Question

我正在研究一个简单的翻转效果，它实际上工作得很好，我只是想添加另一个效果，它会在我点击翻转按钮后逐个翻转。

我希望你理解我。

感谢。

SAMPLE CODE

     <div class="row numList flip-panel">
<div class="col-md-5ths">
    <div class="num front">
  1
    </div>
    <div class="num back">
    2
</div>
</div>
<div class="col-md-5ths">
    <div class="num front">
    2
</div>
    <div class="num back">
3
</div>
</div>
<div class="col-md-5ths">
    <div class="num front">
  3
    </div>
    <div class="num back">
    4
</div>
</div>
<div class="col-md-5ths">
    <div class="num front">
4   
</div>
    <div class="num back">
    5
</div>
</div>
<div class="col-md-5ths">
    <div class="num front">
    5
</div>
    <div class="num back">
    6
</div>

    </div>
</div>
<button>flip</button>

Answer 1

根据您的html，您将flip效果应用于包含所有数字的最外层div。您需要分别为每个div应用效果。您需要将flip-panel类添加到需要单独翻转的每个div中。然后，您可以使用for循环和setTimeout按顺序应用样式。

$(document).ready(function(){
  $('button').click(function(){
    var panel = $('.flip-panel');
    for (let i = 0; i < panel.length; i++) {
      setTimeout(function() {
        panel.eq(i).addClass('flip');
      }, 500 * i);
    }  
  });
});

  .flip-panel {
    margin: 0 auto;
    position: relative;
    font-size: .8em;
    text-align: center;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
}
.col-md-5ths{
  display: inline-block;
  padding: 20px;
}
/* -- make sure to declare a default for every property that you want animated -- */

/* -- general styles, including Y axis rotation -- */
.flip-panel .front {
  position:absolute;
  top: 0;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    /* -- transition is the magic sauce for animation -- */
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.flip-panel.flip .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
}
.flip-panel .back {
  position:absolute;
  top: 0;
    -webkit-transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateY(-180deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    /* -- transition is the magic sauce for animation -- */
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.flip-panel.flip .back {
    z-index: 1000;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row numList">
	<div class="col-md-5ths flip-panel">
		<div class="num front">
      1
		</div>
		<div class="num back">
		2
    </div>
	</div>
	<div class="col-md-5ths flip-panel">
		<div class="num front">
		2
    </div>
		<div class="num back">
    3
    </div>
	</div>
	<div class="col-md-5ths flip-panel">
		<div class="num front">
      3
		</div>
		<div class="num back">
		4
    </div>
	</div>
	<div class="col-md-5ths flip-panel">
		<div class="num front">
    4	
    </div>
		<div class="num back">
		5
    </div>
	</div>
	<div class="col-md-5ths flip-panel">
		<div class="num front">
		5
    </div>
		<div class="num back">
		6
    </div>
	</div>
</div>

<button>flip</button>