Is there a JavaScript function to do a animation in reverse after clicking a button a 2nd time?

user_14599489 0
Viewed 52

I'm still learning JavaScript, and not too familiar with it or I have just flat out forgotten it. But I have a button on my page that looks like this:

function hiddenjs() {
     var x = document.getElementById("hiddenjs");
     if (x.style.display === "block") {
          x.style.display = "none";
      } else {
          x.style.display = "block";
     }
   }
   .hiddenjsa {
      margin: 0 auto;
      background-color: red;
      animation-name: expandz;
      animation-duration: 1.5s; 
      animation-timing-function: ease-out; 
      animation-delay: 0;
      animation-direction: alternate;
      animation-fill-mode: both;
      animation-play-state: running;
    }
    
    @keyframes expandz {
      0% {
        transform: scale(.3);
        background-color: red;
        border-radius: 100%;
      }
      50% {
        background-color: rgb(71, 8, 8);;
      }
      100% {
        transform: scale(1.5);
        background-color: rgb(139, 139, 3);
      }
    }
    <div class="btn4">
        <button class="btn4a" onclick="hiddenjs()">List of Other Games I'm going to review!</button>
    </div>
    
    <div id="hiddenjs" class="hiddenjsa">
        Note: These are NOT clickable links yet as I have yet to review them and add them to the site. 
        These are just references to which I am in the process of reviewing!
    </div>

I was wondering, without jQuery, or any other forms of language if there is a way through JavaScript alone, that you can do a toggle button to do the animation (which I've done) and when you click said button again, it does the animation but in reverse?

I've read up a few things on it but can't find something without copy and pasting a jQuery snippet, and I don't want to do that because I want to understand what I'm doing.

animation css html jquery javascript
1 Answers

You can set an animation on each click to either expand or reverse the expansion. Instead of display settings, set the scale at the start of the forward animation as 0.

This snippet deliberately has two keyframes which are identical but one set to run in reverse, just to make it clearer what is going on.

function hiddenjs() {
     var x = document.getElementById("hiddenjs");
     if ( x.style.animationDirection != "normal" ) {
x.style.animationDirection = "normal";
x.style.animationName = "expandz";
}
      else {
x.style.animationDirection = "reverse";
x.style.animationName= "expandz1";
   
   }
}
   .hiddenjsa {
      margin: 0 auto;
      transform: scale(0);
      background-color: red;
      animation-duration: 1.5s; 
      animation-timing-function: ease-out; 
      animation-delay: 0;
      animation-fill-mode: forwards;
    }
    
    @keyframes expandz {
      0% { transform: scale(0); }
      1% {
        transform: scale(.3);
        background-color: red;
        border-radius: 100%;
      }
      50% {
        background-color: rgb(71, 8, 8);;
      }
      100% {
        transform: scale(1.5);
        background-color: rgb(139, 139, 3);
      }
    }
@keyframes expandz1 {
0% { transform: scale(0); }
  1% {
    transform: scale(.3);
    background-color: red;
    border-radius: 100%;
  }
  50% {
    background-color: rgb(71, 8, 8);;
  }
  100% {
    transform: scale(1.5);
    background-color: rgb(139, 139, 3);
  }
}
    <div class="btn4" style=“z-index:100;”>
        <button class="btn4a" onclick="hiddenjs()">List of Other Games I'm going to review!</button>
    </div>
    
    <div id="hiddenjs" class="hiddenjsa">
        Note: These are NOT clickable links yet as I have yet to review them and add them to the site. 
        These are just references to which I am in the process of reviewing!
    </div>

user_108674540
Related