Question

卡至少起伏最小180度旋转，使用JS在CSS中设置，但在多次运行中，其中一些根本不旋转。有人可以解释一下原因吗？

<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>

Answer 1

易。

要开始在此笔中旋转，卡必须接收 new css。

如果由rnd（）函数生成的数字与前一个相同，则元素的css不会改变，因此浏览器不会启动动画，它认为已经播放了（并且它已经播出）。

要'重新启动动画'，如果它有SAME参数你有两种方法 - 或者从DOM中删除元素并将其取回那里（丑陋，啊？）或者你可以清除样式然后及时将其设置回来。这个技巧将有助于“重启”动画。

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

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

我已经把你的笔分叉并让所有卡片旋转here。

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'));
  });
}

工作演示：

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/

为什么有些卡片根本不会旋转呢？

2 个答案: