有时为什么一些卡片完全不能旋转？

Question

示例: http://codepen.io/anon/pen/mEoONW

Cards至少旋转180度，使用CSS和JS设置，但在多次运行中有些卡片根本不旋转。 有人能解释一下为什么吗？

<div class="flip-container">
    <div class="flipper">
        <div class="front"></div>
        <div class="back">?</div>
    </div>
</div>
...

<button onclick="rotate();">Rotate</button>
<style>
.flip-container {
    perspective: 1000px;float:left;
}
.flip-container, .front, .back {
    width: 160px;height: 220px;
}
.flipper {
    transform-style:preserve-3d;position: relative;
}
.front, .back {
    backface-visibility: hidden;position: absolute; top: 0; left: 0;    
}
.front {
    z-index: 2; transform: rotateY(0deg);background-color: blue;
}
.back {
    transform: rotateY(180deg); background-color: grey;font-size: 13em; text-align: center; vertical-align: middle;
}
</style>
<script>
function rnd(){
    var randNum = Math.floor((Math.random() * 20) + 1);
    if(randNum %2 == 0){//generated number is even
       randNum  = randNum +1 ;       
    }
    return randNum;
}
function rotate(){
    $('.flipper').each(function(i, obj) {
        var rn = rnd();
        var nn = 180 * rn;
        var sp = 0.2 * rn;
        console.log(rn);
        $(this).css("transition", sp+"s").css("transform", "rotateY("+nn+"deg)");
    });
}
</script>

- user2224893

---

可能与其随机性有关。 - Keith

我发现当同一张卡片获得与之前完全相同的随机数时，它将不会旋转。 - Aziz

那本来就是我的建议，Aziz。 - Steven Moseley

因此，解决方案将在每次旋转之前将卡片位置重置为初始位置。 - jacqbus

Answer 1

简单。

要开始在这支笔中旋转，需要为卡片接收新的css。

如果由rnd()函数生成的数字与以前的数字相同，则不会更改元素的css，因此浏览器不会启动动画，它认为已经播放（实际上是已经播放过了）。

如果要“重新启动动画”，如果具有相同的参数，则有两种方法-从DOM中删除元素并将其再次放回（丑陋，对吧？）或者您可以清除样式，然后在超时时间设置回来。那个技巧将有助于“重新启动”动画。

$element.attr('style', null); //remove old style before setting new
setTimeout(function(){

   $element.css("transition", "0.6s");
   $element.css("transform", "rotateY("180deg)");
}, 100);

我已经fork了你的代码并使得所有卡片旋转。你可以在这里查看。

- Denis Matafonov

Answer 2

你可以创建一个额外的检查器，以防止相同的卡片再次接收到相同的数字。

function rotate() {
  $('.flipper').each(function(i, obj) {
    var rn = rnd();
    if ( $(this).data('rn') == rn ) { rn = rn + 2; }
    var nn = 180 * rn;
    var sp = 0.2 * rn;
    $(this).data('rn', rn);
    $(this).css("transition", sp + "s");
    $(this).css("transform", "rotateY(" + nn + "deg)");
    console.log(i + ': ' + rn + ' -d: ' + $(this).data('rn'));
  });
}

Working Demo:

function rnd() {
  var randNum = Math.floor((Math.random() * 20) + 1);
  if (randNum % 2 == 0) { randNum = randNum + 1; }
  return randNum;
}

function rotate() {
  $('.flipper').each(function(i, obj) {
    var rn = rnd();
    if ( $(this).data('rn') == rn ) { rn = rn + 2; }
    var nn = 180 * rn;
    var sp = 0.2 * rn;
    $(this).data('rn', rn);
    $(this).css("transition", sp + "s");
    $(this).css("transform", "rotateY(" + nn + "deg)");
    //console.log(i + ': ' + rn + ' -d: ' + $(this).data('rn'));
  });
}
rotate();

$('body').on('click', '#rotate', function(){rotate();});

.cards::after { clear:both; content: ''; display: table;}

/* entire container, keeps perspective */
.flip-container {
  perspective: 1000px;
  float: left;
  margin: 2px;
}

.flip-container,.front,.back {
  width: 160px;
  height: 220px;
}

/* flip speed goes here */
.flipper {
  transition: 0.6s;
  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);
  background-color: blue;
}

/* back, initially hidden pane */
.back {
  transform: rotateY(180deg);
  background-color: grey;
  font-size: 13em;
  text-align: center;
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cards">
  <div class="flip-container">
    <div class="flipper">
      <div class="front">
        <!-- front content -->
      </div>
      <div class="back">
        ?
      </div>
    </div>
  </div>
  <div class="flip-container">
    <div class="flipper">
      <div class="front">
        <!-- front content -->
      </div>
      <div class="back">
        ?
      </div>
    </div>
  </div>
  <div class="flip-container">
    <div class="flipper">
      <div class="front">
        <!-- front content -->
      </div>
      <div class="back">
        ?
      </div>
    </div>
  </div>
  <div class="flip-container">
    <div class="flipper">
      <div class="front">
        <!-- front content -->
      </div>
      <div class="back">
        ?
      </div>
    </div>
  </div>
  <div class="flip-container">
    <div class="flipper">
      <div class="front">
        <!-- front content -->
      </div>
      <div class="back">
        ?
      </div>
    </div>
  </div>
  <div class="flip-container">
    <div class="flipper">
      <div class="front">
        <!-- front content -->
      </div>
      <div class="back">
        ?
      </div>
    </div>
  </div>
</div>
<button id="rotate">Rotate</button>

jsFiddle: https://jsfiddle.net/azizn/9v6340fd/

jsFiddle：https://jsfiddle.net/azizn/9v6340fd/

- Aziz