Question

我目前正在开发一个跳棋游戏，我试图获得一个有效的动画代码在跳棋上工作，以便它缓慢移动到下一个位置。

这是我的CSS：

@keyframes animateCheckerPiece {

            0% {top: 80px}
            50% {top: 270px}
            100% {top: 80px}
        }
.redChecker {

    height: 50px;
    width: 50px;
    background-color: red;
    border: solid red 2px;
    border-radius: 40px;
    position: relative;
}

这是我的源代码：

<tr id="row_C">
                    <td id="C1" class="odd"></td>
                    <td id="C2" class="even"><div align="center"><div id="r9" class="redChecker" onClick="chooseMove(event);"></div></div></td>
                    <td id="C3" class="odd"></td>
                    <td id="C4" class="even"><div align="center"><div id="r10" class="redChecker" onClick="chooseMove(event);"></div></div></td>
                    <td id="C5" class="odd"></td>
                    <td id="C6" class="even"><div align="center"><div id="r11" class="redChecker" onClick="chooseMove(event);"></div></div></td>
                    <td id="C7" class="odd"></td>
                    <td id="C8" class="even"><div align="center"><div id="r12" class="redChecker" onClick="chooseMove(event);"></div></div></td>
                </tr>

这是我的JavaScript：

var piece, getId;

function chooseMove(event) {

    "use strict";

    getId = event.target.id;

    document.getElementById(getId).style.borderColor = "yellow";

    $("td").addClass("hover");
    $("#msg").html("Choose a spot to move to");

}

function movePiece(event) {

    "use strict";

    var piece = getId;
    var getLocId = event.target.id;

    $(piece).animate({ 
        top: "-=30px",
      }, 2000);

}

Answer 1

实际上，原因是您没有按照自己的样式调用动画，

编辑后的样式在这里

您可以在一行中添加其他选项

.redChecker {
  height: 50px;
  width: 50px;
  background-color: red;
  border: solid red 2px;
  border-radius: 40px;
  position: relative;
  animation: animateCheckerPiece 3.5s ease-in-out;
}

还要检查MDN及其工作原理https://developer.mozilla.org/en-US/docs/Web/CSS/animation

Answer 2

它不是相关的javascript。您的CSS代码错误。

var piece, getId;

function chooseMove(event) {

    "use strict";

    getId = event.target.id;

    document.getElementById(getId).style.borderColor = "yellow";

    $("td").addClass("hover");
    $("#msg").html("Choose a spot to move to");

}

function movePiece(event) {

    "use strict";

    var piece = getId;
    var getLocId = event.target.id;

    $(piece).animate({ 
        top: "-=30px",
      }, 2000);

}

.redChecker {

    height: 50px;
    width: 50px;
    background-color: red;
    border: solid red 2px;
    border-radius: 40px;
    position: relative;
  animation: animateCheckerPiece 2s linear;
}

@keyframes animateCheckerPiece {

            0% {top: 80px}
            50% {top: 270px}
            100% {top: 80px}
        }

<tr id="row_C">
                    <td id="C1" class="odd"></td>
                    <td id="C2" class="even"><div align="center"><div id="r9" class="redChecker" onClick="chooseMove(event);"></div></div></td>
                    <td id="C3" class="odd"></td>
                    <td id="C4" class="even"><div align="center"><div id="r10" class="redChecker" onClick="chooseMove(event);"></div></div></td>
                    <td id="C5" class="odd"></td>
                    <td id="C6" class="even"><div align="center"><div id="r11" class="redChecker" onClick="chooseMove(event);"></div></div></td>
                    <td id="C7" class="odd"></td>
                    <td id="C8" class="even"><div align="center"><div id="r12" class="redChecker" onClick="chooseMove(event);"></div></div></td>
                </tr>

为什么我的关键帧动画无法在div上工作？

2 个答案: