css - 如何反转关键帧？

Question

我尝试创建响应式网络应用，在移动设备上看起来如下:

通过单击菜单栏，它将转换为:

样式是用 SCSS 编写的，如下所示:

.topbar-menu {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;

  .topbar-navi-menu {
    margin-left: 15px;
    height: 30px;
    width: 40px;
    display: block;
    cursor: pointer;
    position: relative;

    i {
      position: absolute;
      height: 5px;
      width: 100%;
      background-color: #ffffff;

      &.topbar-animate-forward {
        &:first-child {
          animation: topbar-first-bulk 500ms forwards;
        }

        &:nth-child(2) {
          animation: topbar-middle-bulk 500ms forwards;
        }

        &:last-child {
          animation: topbar-last-bulk 500ms forwards;
        }
      }

      &:first-child {
        top: 0;
      }

      &:nth-child(2) {
        top: 50%;
        transform: translateY(-50%);
      }

      &:last-child {
        bottom: 0;
      }
    }

    @keyframes topbar-first-bulk {
      0% {
        top: 0;
        transform: translateY(0%) rotate(0deg);
      }

      25% {
        top: 50%;
        transform: translateY(-50%) rotate(0deg);
      }

      50% {
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
      }

      100% {
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
      }
    }

    @keyframes topbar-middle-bulk {
      0% {
        top: 50%;
        transform: translateY(-50%) rotate(0deg);
      }

      25% {
        top: 50%;
        transform: translateY(-50%) rotate(0deg);
      }

      50% {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
      }

      100% {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
      }
    }

    @keyframes topbar-last-bulk {
      0% {
        bottom: 0;
        transform: translateY(0%) rotate(0deg);
      }

      25% {
        bottom: 50%;
        transform: translateY(50%) rotate(0deg);
      }

      50% {
        bottom: 50%;
        transform: translateY(50%) rotate(-45deg);
      }

      100% {
        bottom: 50%;
        transform: translateY(50%) rotate(-45deg);
      }
    }
  }
}

我正在使用 reasonreact它就像 reactjs。 JSX 结构:

<div className="topbar-container">
  <section className="topbar-menu">
    <a
      onClick={
        _evt => self.send(MobileMenuToggler(self.state.showMobileMenu))
      }
      className="topbar-navi-menu">
      <i className={self.state.mobileMenuAnimate} />
      <i className={self.state.mobileMenuAnimate} />
      <i className={self.state.mobileMenuAnimate} />
    </a>
  </section>
</div>

如何使用 css 将动画反转回菜单栏？

Answer 1

使用转换在状态之间进行交换。你不能轻易地告诉动画前进和后退，因为它们的插值值，即动画开始的当前时间步长，有点固定。即使你突然告诉一个样式它应该向后而不是向前，它也不会像你想的那样动画，因为它只会应用具有相同当前时间步长的新插值函数，这意味着它只会捕捉到新的插值。

取而代之的是，应用分层过渡并设置不同的过渡延迟，当您删除“事件”类时，这些延迟会根据您希望的反转。

例如，在您的风格中，您希望等到动画进行到 25% 时才应用变换更改。只需在该属性上设置一个转换延迟。

考虑阅读这篇文章以获取有关多步动画的更多详细信息:Using Multi-Step Animations and Transitions .

const toggle = document.getElementById("toggle");

toggle.addEventListener("click", e => {
  toggle.classList.toggle("topbar-animate-forward");
});

.topbar-container {
  background-color: blue;
  padding: 1em;
}

.topbar-menu {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.topbar-menu .topbar-navi-menu {
  margin-left: 15px;
  height: 30px;
  width: 40px;
  display: block;
  cursor: pointer;
  position: relative;
}

.topbar-menu .topbar-navi-menu i {
  position: absolute;
  height: 5px;
  width: 100%;
  background-color: #ffffff;
}

.topbar-menu .topbar-navi-menu i {
  transition: top 500ms ease-in-out 125ms, bottom 500ms ease-in-out 125ms, transform 500ms ease-in-out;
}

.topbar-menu .topbar-navi-menutopbar-animate-forward i {
  transition: top 500ms ease-in-out, bottom 500ms ease-in-out, transform 500ms ease-in-out 125ms;
}

.topbar-menu .topbar-navi-menu i:first-child {
  top: 0;
  transform: translateY(0%) rotate(0deg);
}

.topbar-menu .topbar-navi-menu.topbar-animate-forward i:first-child {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

.topbar-menu .topbar-navi-menu i:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.topbar-menu .topbar-navi-menu.topbar-animate-forward i:nth-child(2) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.topbar-menu .topbar-navi-menu i:last-child {
  bottom: 0;
  transform: translateY(0%) rotate(0deg);
}

.topbar-menu .topbar-navi-menu.topbar-animate-forward i:last-child {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

<div class="topbar-container">
  <section class="topbar-menu">
    <a id="toggle" class="topbar-navi-menu">
      <i></i>
      <i></i>
      <i></i>
    </a>
  </section>
</div>