如何在单击时启动css动画并在第二次单击时反向运行动画

Question

我正在尝试创建一个动画汉堡菜单。我发现了CSS动画，并决定使用它。

菜单

的设置非常简单：我有一个背景颜色和构成汉堡菜单的两个div。

我创建了一个方形div，并将其放置在菜单的右上角。我现在的目标是当我单击此按钮时背景淡入。按钮现在是绿色的，但这是暂时的。当我现在如何在单击时启动动画时，我将对菜单的其余部分进行动画处理。

我已经尝试了很多来解决这个问题，但它就是不起作用。希望你能帮到我！

下面的代码是我现在拥有的代码。我没有添加与此问题不太相关的代码。

当我再次单击该按钮时，菜单也应该关闭，因此动画应该反向运行。我怎样才能最好地做到这一点？

谢谢！拉尔夫

索引.html

</div>
    <div class="dsgn-header">
        <div class="dsgn-header-menu-opened">
            <div class="dsgn-header-menu-opened-background"></div>
            <div class="dsgn-header-menu-opened-menuitems"></div>
        </div>
    <div class="dsgn-header-logo">
        <p class="dsgn-header-title">Site title</p>
    </div>
    <div class="dsgn-header-menu-mobile">
        <div class="dsgn-header-rectangle-up"></div>
        <div class="dsgn-header-rectangle-down"></div>
    <div class="dsgn-header-button" onclick="ani()" ></div>
</div>

标头.css

.dsgn-header {
  width: 100vw;
  height: 88px;
  margin-left: 0px;
  background-color: white;
}

/* Logo */
@media (max-width: 350px) {
  .dsgn-header-logo {
    position: absolute;
    left: 16px;
    top: 27px;
  }
}
@media (min-width: 351px) {
  .dsgn-header-logo {
    position: absolute;
    left: 28px;
    top: 27px;
    width: 75%;
    max-width: 500px;
  }
}
.dsgn-header-title {
  color: #FF0000;
  font-size: 28px;
  font-family: 'Playfair Display', serif;
}

/* Menu animation */
.dsgn-header-rectangle-up {
  position:absolute;
  width:40px;
  height:1px;
  background:grey;
  right:28px;
  top:40px;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  animation-name: dsgn-header-rectangle-up;
  animation-duration: 1s;
}
.dsgn-header-rectangle-down {
  position:absolute;
  width:40px;
  height:1px;
  background:grey;
  right:28px;
  top:54px;
  -webkit-animation-name: dsgn-header-rectangle-down; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  animation-name: dsgn-header-rectangle-down;
  animation-duration: 1s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  100% {background-color:red; left:0px; top:0px;}
}
/* Let op de ease in ease out en de animation iteration */

/* Menu opened */
.dsgn-header-menu-opened-background-active {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100vw;
  height: 100vh;
background-color: black;
 -webkit-animation-name: menu-background; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  animation-name: menu-background;
  animation-duration: 1s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes menu-background {
  0%   {
opacity: 0;
}
  100%   {
opacity: 1;
}
}
/* Standard syntax */
@keyframes menu-background {
  0%   {
opacity: 0;
}
  100%   {
opacity: 1;
}
}

.dsgn-header-menu-opened-menuitems {
  position: absolute;
  left: 45px;
  top: 150px;
  width: 75%;
  background-color: grey;
}
.dsgn-header-button {
position: absolute;
top: 0px;
right: 0px;
width: 88px;
height: 88px;
background-color: green;
}

Javascript：

$('#dsgn-header-button').onClick(function(){
    $('#dsgn-header-menu-opened-background').addClass('.dsgn-header-menu-opened-background-active');
});

Answer 1

如果你真的想制作这个可逆动画，我建议你使用 transition 而不是 keyframes ，因为当你开始animation时，没有办法跟踪当前状态和目标状态，所以如果你在动画未完成时点击按钮，它会直接跳到最后一帧并反向播放。

但是，解决方案仍然是：

const demo = document.querySelector('.demo');
const button = document.querySelector('button');
let reverse = false;
button.addEventListener('click', onClickPlay);
function onClickPlay(){
  // Save the animation state
  let animation = demo.style.animation;
  
  // Clear the animation
  demo.style.animation = 'none';
  
  // You need to call this at next draw call to make the animation take effects
  setTimeout(()=>{
    // Restore the animation
    demo.style.animation = animation;
    // Make the animation running
    demo.style.animationPlayState = 'running';
    // Set the animation direction by current state
    demo.style.animationDirection = reverse ? 'reverse' : 'normal';
    // Flip the state
    reverse = !reverse;
    button.innerText = reverse ? 'Reverse' : 'Forward';
  }, 0);
}

@keyframes anim {
  0% {
    width: 0px;
    background-color: red;
  }
  
  100% {
    width: 100px;
    background-color: blue;
  }
}
.demo {
  /* Make the animation paused at the beginning */
  animation: anim 1s paused both;
  width: 0px;
  height: 20px;
}

<button>Forward</button>
<div class="demo"><div>