使用变换禁用 scaling/rotation 上的动画

Question

我正在页面中制作国际象棋游戏，我正在尝试使用 css 转换翻转整个棋盘（div）。我第一次尝试 rotate 或 scale(1, -1) 都可以工作，但会制作一个烦人的小动画。

我想要的是去掉这个动画。 CSS class 的代码我正在动态添加和删除我的 divs:

.rotated {
    -webkit-transform: rotate(180deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(180deg);  /* Firefox 3.5-15 */
    -ms-transform: rotate(180deg);  /* IE 9 */
    -o-transform: rotate(180deg);  /* Opera 10.50-12.00 */
    transform: rotate(180deg);  /* Firefox 16+, IE 10+, Opera 12.10+ */
}

我不是在寻找 transition-delay，变换和转换不是一回事。将 transition-delay 设置为 0ms（默认值）没有任何改变。

Answer 1

您没有 post 您的 HTML 代码，但如果您只是将 .rotated class 添加到主 div - 您还必须添加此class到第div双棋子divs.

例如，如果您使用 jQuery 添加 class ...它看起来像这样：

$("button").click(function() {
  $("#container").toggleClass("rotated");
  $("div.white").toggleClass("rotated");
  $("div.black").toggleClass("rotated");
});

.chessboard {
  width: 640px;
  height: 640px;
  margin: 20px;
  border: 25px solid #333;
}
.black {
  float: left;
  width: 80px;
  height: 80px;
  background-color: #999;
  font-size: 50px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.white {
  float: left;
  width: 80px;
  height: 80px;
  background-color: #fff;
  font-size: 50px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.rotated {
  -webkit-transform: rotate(180deg);
  /* Chrome, Safari 3.1+ */
  -moz-transform: rotate(180deg);
  /* Firefox 3.5-15 */
  -ms-transform: rotate(180deg);
  /* IE 9 */
  -o-transform: rotate(180deg);
  /* Opera 10.50-12.00 */
  transform: rotate(180deg);
  /* Firefox 16+, IE 10+, Opera 12.10+ */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button>Toggle Board</button>
<div id="container">
  <div id="chessboard" class="chessboard">
    <!-- 1st -->
    <div class="white">&#9820;</div>
    <div class="black">&#9822;</div>
    <div class="white">&#9821;</div>
    <div class="black">&#9819;</div>
    <div class="white">&#9818;</div>
    <div class="black">&#9821;</div>
    <div class="white">&#9822;</div>
    <div class="black">&#9820;</div>
    <!-- 2nd -->
    <div class="black">&#9821;</div>
    <div class="white">&#9821;</div>
    <div class="black">&#9821;</div>
    <div class="white">&#9821;</div>
    <div class="black">&#9821;</div>
    <div class="white">&#9821;</div>
    <div class="black">&#9821;</div>
    <div class="white">&#9821;</div>
    <!-- 3th -->
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <!-- 4st -->
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <!-- 5th -->
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <!-- 6th -->
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <!-- 7th -->
    <div class="white">&#9817;</div>
    <div class="black">&#9817;</div>
    <div class="white">&#9817;</div>
    <div class="black">&#9817;</div>
    <div class="white">&#9817;</div>
    <div class="black">&#9817;</div>
    <div class="white">&#9817;</div>
    <div class="black">&#9817;</div>
    <!-- 8th -->
    <div class="black">&#9814;</div>
    <div class="white">&#9816;</div>
    <div class="black">&#9815;</div>
    <div class="white">&#9813;</div>
    <div class="black">&#9812;</div>
    <div class="white">&#9815;</div>
    <div class="black">&#9816;</div>
    <div class="white">&#9814;</div>
  </div>
</div>

JSFiddle Demo

使用变换禁用 scaling/rotation 上的动画

Disable animation on scaling/rotation with transform

html

css

css-transforms