淡出javascript

Question

抱歉但是找不到类似的问题。所以问题是我无法找到让每个井字游戏后消息消失的方法。它只是第一次工作，然后消失。 以下是完整代码的链接：http://codepen.io/Y-Taras/pen/rrkKWz
我试着添加一个 footer.className = ""; 但这一次，预期的信息根本没有出现 代码太长了，所以这是关于这个问题的摘要：

<footer></footer>

和css：

footer.fade {
animation: fadeinout 4s linear forwards;
}
@keyframes fadeinout {
0%, 100% {opacity: 0;
}
50% {opacity: 1;
}}

和JS

 function makeMove() {
    if (game.winner(board) === "x") {
        footer.innerHTML = "The Winner is X";
        footer.className = "fade";
        restartGame();
        return;
    } else if (game.winner(board) === "o") {
        footer.innerHTML = "The Winner is O";
        footer.className = "fade";
        restartGame();
        return;
    } else if (game.winner(board) === true) {
        footer.innerHTML = "It's a draw";
        footer.className = "fade";
        restartGame();
        return;
    }

Answer 1

你所追求的是两个州（班级）之间的transition。为此，您应该将类​​名更改为其他名称，否则不会触发。

CSS：

footer.show { opacity: 1; transition: opacity 4s linear; }
footer.hide { opacity: 0; transition: opacity 4s linear; }

JS：

function makeMove() {
if (game.winner(board) === "x") {
    footer.innerHTML = "The Winner is X";
    footer.className = "show";
    ...

function restartGame() {
    footer.className = "hide";
    ...