Question

我正在尝试制作一个汉堡按钮动画。问题是该动画仅对第一次单击有效，并且我不知道如何使第二次单击进行反向动画。我不确定如果不使用关键帧就可以做到这一点。附言CSS中的括号未格式化，因为它是从scss编译而来的。

var hamburger = document.getElementById("hamburger");
var nav_items = document.getElementsByClassName("nav-items")[0];
var line1 = document.getElementsByClassName("line1")[0];
var line2 = document.getElementsByClassName("line2")[0];
var line3 = document.getElementsByClassName("line3")[0];

hamburger.addEventListener("click", function() {
  nav_items.classList.toggle("nav-open");
  line1.classList.toggle("first-line");
  line2.classList.toggle("middle-line-hidden");
  line3.classList.toggle("last-line");
});

body {
  background-color: white;
  margin: 0;
  padding: 0;
   }

#navbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100px;
  color: white;
  z-index: 100;
  background-color: blue;
  }

#logo {
  position: absolute;
  top: 50%;
  left: 25px;
  transform: translateY(-50%);
  font-size: 25px; }
  #logo a {
    text-decoration: none;
    color: white; }
  #logo a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 5px;
    width: 100%;
    background-color: yellow;
    z-index: -1; }

.nav-items {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  visibility: hidden;
  justify-content: center;
  font-size: 2rem;
  background-color: black; }
  .nav-items a {
    text-decoration: none;
    color: white;
    margin: 15px 0; }
    .nav-items a:first-child {
      margin-top: 0; }
    .nav-items a:hover {
      color: yellow; }

#hamburger {
  height: 40px;
  width: 40px;
  background-color: transparent;
  border: 0px solid transparent;
  padding: 0;
  position: absolute;
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  }
  #hamburger .line1,
  #hamburger .line2,
  #hamburger .line3 {
    position: absolute;
    left: 0;
    height: 5px;
    width: 100%;
    background-color: white;
    border-radius: 25px;
    transition: 0.5s linear; }
  #hamburger .line1 {
    top: 3px; }
  #hamburger .line2 {
    top: 50%;
    transform: translateY(-50%); }
  #hamburger .line3 {
    bottom: 3px; }

.nav-open {
  visibility: visible; }

.middle-line-hidden {
  animation: hamburger-mid-line 0s linear;
  animation-fill-mode: forwards;
  animation-delay: 0.3s; }

.first-line {
  animation: hamburger-first-line 0.5s;
  animation-fill-mode: forwards; }

.last-line {
  animation: hamburger-last-line 0.5s;
  animation-fill-mode: forwards; }

@keyframes hamburger-mid-line {
  from {
    visibility: visible; }
  to {
    visibility: hidden; } }

@keyframes hamburger-first-line {
  0% { }
  50% {
    top: 50%;
    transform: translateY(-50%); }
  100% {
    top: 42%;
    transform: rotate(45deg); } }

@keyframes hamburger-last-line {
  0% { }
  50% {
    bottom: 50%;
    transform: translateY(50%); }
  100% {
    bottom: 45%;
    transform: rotate(-45deg); } }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/main.css" />
  </head>

  <body>
    <header id="navbar">
      <div class="nav-items">
        <a href="#">link1</a>
        <a href="#">link2</a>
        <a href="#">link3</a>
      </div>

      <button id="hamburger">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
      </button>
    </header>


    
  </body>
</html>

Answer 1

最简单的方法是在CSS中将动画分配给一个类，例如带有打开动画的.openedhamburger。

现在使用结束动画创建分配给其他类的其他动画，例如.closedhamburger。

最后用javascript将分配给元素的类切换到该位置，只要分配了不同的类，就会触发适当的动画。

编辑：此外，尽管在您的情况下使用两步动画，所以这并不适用，请知道使用此类方法，如果启用平滑过渡，有时甚至可以它没有任何动画：只需将两个状态上元素的位置和旋转关联起来，然后由于启用了平滑转换，就会出现动画。

汉堡按钮上的反向动画

1 个答案: