フェードインアウト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

がAで2つの州（クラス）の間のtransition。これを行うには、クラス名を他のクラスに変更する必要があります。それ以外の場合は、クラス名がトリガーされません。

CSS：

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

JS：クラスはそれと同じであるとき、それもDOMを更新しないよう

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

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