时间戳

首页 > 解决方案 > 是否有 JavaScript 函数可以在第二次单击按钮后反向执行动画？

javascript - 是否有 JavaScript 函数可以在第二次单击按钮后反向执行动画？

问题描述

我还在学习 JavaScript，对它不太熟悉，或者我完全忘记了它。但我的页面上有一个按钮，如下所示：

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>

我想知道，如果没有 jQuery 或任何其他形式的语言，如果只有通过 JavaScript 的方法，你可以做一个切换按钮来做动画（我已经做过），当你再次单击所述按钮时，它确实动画但相反？

我已经阅读了一些关于它的内容，但是如果没有复制和粘贴 jQuery 片段就找不到东西，我不想这样做，因为我想了解我在做什么。

标签： javascripthtmljquerycssanimation

解决方案

您可以在每次单击时设置动画以展开或反转展开。将正向动画开始时的比例设置为 0，而不是显示设置。

这个片段故意有两个相同的关键帧，但一个设置反向运行，只是为了更清楚发生了什么。

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;”&gt;
        <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>

推荐阅读