CODEWITHSUNDEEP
javascriptcsscss-animations
Taras Yaremkiv
Taras Yaremkiv

Reputation: 3600

Fade In Out javascript

Sorry But just can't find the similar question. So the problem is I couldn't find the way to make the message fade in out after every tic-tac-toe game. It works only first time, and then disappears. Here is a link with the full code: http://codepen.io/Y-Taras/pen/rrkKWz
I tried to add a footer.className = ""; But this time the message as was expected didn't appear at all.
The code is too long, so here 's an abstract concerning the problem:

<footer></footer>

And css:

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

And 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;
    }

Upvotes: 0

Views: 247

Answers (1)

Simon
Simon

Reputation: 2423

What you are after is a transition between two states (class). For this to work, you should change the class name to something else otherwise it is not triggered.

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";
    ...

Upvotes: 1

Related Questions