时间戳

首页 > 解决方案 > 反转没有 jquery 的 CSS 动画

javascript - 反转没有 jquery 的 CSS 动画

问题描述

我正在制作一个下拉菜单，点击后应该会滑入视图。我想让它在第二次点击时滑回，但一直在努力弄清楚如何做到这一点。我在网上找到的大多数答案都涉及 jQuery，但我希望用 vanilla 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";
}

这非常适合让下拉菜单在点击时运行，但我正在努力弄清楚如何在第二次点击时反转它。我在想我可以创建一个新的@keyframes 下拉反转动画并将其添加到类中，但后来我意识到我无法使用 JS 控制一个类下的两个动画。我在想我也可以创建两个不同的类并使用 JS 添加/删除这些类以及控制两个不同的动画，但我觉得必须有一个更优雅的解决方案，我错过了。

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

标签： javascriptcsscss-animations

解决方案

使用以下 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>

推荐阅读