反转不带jquery的CSS动画

Question

我正在制作一个下拉菜单，它应该会在单击时滑入视图。我想让它在第二次点击时重新滑动起来，但一直在努力想办法做到这一点。我在网上找到的大多数答案都与jQuery有关，但我希望用普通的js来实现这一点。

我的CSS：

.post-more-dropdown {
    background-color: #f8f9fa;
    display: block;
    position: absolute;
    right: 0px;
    top: 60px;
    min-width: 80px;
    animation-name: dropdown;
    animation-play-state: paused;
    animation-fill-mode: backwards;
    animation-duration: 0.7s;
    a {
      display: block;
      padding-left: 10px;
      padding-top: 10px;
    }
    a:hover {
      background-color: #555555;
      color: white;
      cursor: pointer;
    }
  }

@keyframes dropdown {
  0% {
    max-height: 0px;
    opacity: 0;
  }
  100% {
    max-height: 200px;
    opacity: 1;
  }
}

我的javascript：

function post_more_dropdown(post_id) {
  dropdown = document.querySelector(`#post-more-dropdown-${post_id}`);
  dropdown.style.animationPlayState = "running";
}

这可以完美地让下拉菜单在点击时运行，但我正在努力找出如何在第二次点击时反转它。我在想我可以创建一个新的@keyframe下拉反转动画并将其添加到类中，但后来我意识到我不能用JS控制一个类下的两个动画。我在想，我也可以创建两个不同的类，并使用JS添加/删除这些类，同时控制两个不同的动画，但我觉得我缺少一个更优雅的解决方案。

我有一种感觉，animation-direction将是答案的一部分，但我还没有完全弄清楚这将如何工作。

Answer 1

使用以下CSS，使用JavaScript更改类。

​

function post_more_dropdown(post_id) {
  dropdown = document.querySelector(`#post-more-dropdown-${post_id}`);
  if (dropdown.classList.contains('dropdown-animate-forward')) {
    dropdown.classList.add('dropdown-animate-backward');
    dropdown.classList.remove('dropdown-animate-forward');
  } else {
    dropdown.classList.add('dropdown-animate-forward');
    dropdown.classList.remove('dropdown-animate-backward');
  }
}

setInterval(function() {
  post_more_dropdown(1)
}, 1000);

.post-more-dropdown {
  background-color: #f8f9fa;
  display: block;
  position: absolute;
  right: 0px;
  top: 60px;
  min-width: 80px;
  a {
    display: block;
    padding-left: 10px;
    padding-top: 10px;
  }
  a:hover {
    background-color: #555555;
    color: white;
    cursor: pointer;
  }
}


/* forward animation */

.dropdown-animate-forward {
  animation-name: dropdownForward;
  animation-fill-mode: backwards;
  animation-duration: 0.7s;
}

@keyframes dropdownForward {
  0% {
    max-height: 0px;
    opacity: 0;
  }
  100% {
    max-height: 200px;
    opacity: 1;
  }
}


/* backward animation */

.dropdown-animate-backward {
  animation-name: dropdownBackward;
  animation-fill-mode: forward;
  animation-duration: 0.7s;
}

@keyframes dropdownBackward {
  0% {
    max-height: 200px;
    opacity: 1;
  }
  100% {
    max-height: 0px;
    opacity: 0;
  }
}

<div id="post-more-dropdown-1" class="post-more-dropdown">Post more</div>

​