在类之间切换可防止动画播放，直接跳到结束

Question

我正在尝试通过将底线和顶线平移到中间然后旋转成 X 来制作汉堡菜单动画，并希望在单击 X 时反转动画。使用 jquery 我正在切换 class 菜单打开和菜单关闭。当我删除菜单关闭动画的 CSS 时，它会正常触发，但是当我将 CSS 添加回去时，动画只会跳到最后一帧。它形成了我想要的但就是拒绝完全使用动画。

CSS

.navbar .mobile-menu.menu-open .line::before {
        animation: menu-open-top 250ms linear forwards;
    }

    .navbar .mobile-menu.menu-open .line {
        animation: menu-middle 250ms linear forwards;
    }

    .navbar .mobile-menu.menu-open .line::after {
        animation: menu-open-bottom 250ms linear forwards;
    }

    .navbar .mobile-menu.menu-closed .line::before {
        animation: menu-open-top 250ms linear reverse;
    }

    .navbar .mobile-menu.menu-closed .line {
        animation: menu-middle 250ms linear reverse;
    }

    .navbar .mobile-menu.menu-closed .line::after {
        animation: menu-open-bottom 250ms linear reverse;
    }

动画

@keyframes menu-open-top {
    30% {
        bottom: 0;
    }
    60% {
        bottom: 0;
        transform: rotate(0) translate(0);
    }
    100% {
        transform: rotate(45deg) translate(5px, 5px);
        visibility: visible;
    }
}

@keyframes menu-middle {
    40% {
        visibility: hidden;
    }
    to {
        visibility: hidden;
    }
}

@keyframes menu-open-bottom {
    30% {
        top: 0;
    }
    60% {
        top: 0;
        transform: rotate(0) translate(0);
    }
    100% {
        transform: rotate(-45deg) translate(6px, -6px);
        visibility: visible;
    }
}

JS

$(".mobile-menu").click(expandMenu);

    function expandMenu() {
        $(".primary-nav").toggleClass("menu-expand");
        $(this).toggleClass("menu-open menu-closed");
    }

我一定是遗漏了一些东西，或者我可能需要为反向动画添加新的关键帧，但感觉好像没有必要。

编辑：这也是 html

HTML

<div class="mobile-menu menu-closed">
  <div class="line"></div>
</div>

Answer 1

以下是如何使用简单的道具值变化并仔细计时来做到这一点。我想这也可以使用@keyframe 动画来完成，但我发现它们更难 follow/control/sync，至少在这种情况下，考虑到它（基本上）是一个两步动画。

document.querySelector('.mobile-menu').addEventListener('click', ({
  target
}) => {
  target.closest('.mobile-menu').classList.toggle('menu-open');
})

.mobile-menu {
  --duration: 0.42s;
  --size: 3rem;
  --padding: 0.5rem;
  --color: red;
  --distance-timing: cubic-bezier(0.5, 0, 0.3, 1);
  --rotation-timing: cubic-bezier(0.4, 0, 0.2, 1);
  width: var(--size);
  height: var(--size);
  padding: var(--padding);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.mobile-menu * {
  box-sizing: border-box;
}

.mobile-menu>div {
  border: 1px solid var(--color);
  height: 0;
  width: 100%;
  position: relative;
  transform-origin: 50% 50%;
  transition:
    top calc(0.6 * var(--duration)) var(--distance-timing) calc(0.4 * var(--duration)),
    bottom calc(0.6 * var(--duration)) var(--distance-timing) calc(0.4 * var(--duration)), 
    transform calc(0.8 * var(--duration)) var(--rotation-timing) 0s;
}

.mobile-menu> :nth-child(1) {
  top: calc(var(--padding)/2);
}

.mobile-menu> :nth-child(3) {
  bottom: calc(var(--padding)/2);
}

.mobile-menu.menu-open>div {
  transition:
    top calc(0.4 * var(--duration)) var(--distance-timing) 0s,
    bottom calc(0.4 * var(--duration)) var(--distance-timing) 0s,
    transform calc(0.8 * var(--duration)) var(--rotation-timing) calc(0.2 * var(--duration));
}

.mobile-menu.menu-open> :nth-child(1) {
  top: calc(50% - 1px);
  transform: rotate(0.125turn);
}

.mobile-menu.menu-open> :nth-child(2) {
  transform: rotate(0.125turn);
}

.mobile-menu.menu-open> :nth-child(3) {
  bottom: calc(50% - 1px);
  transform: rotate(-0.125turn);
}

<div class="mobile-menu">
  <div></div>
  <div></div>
  <div></div>
</div>

同样的事情，在 SCSS 中：https://jsfiddle.net/websiter/dybre2f9/
我已将值提取到 CSS 变量中，因此可以轻松地重复使用和修改它。随意根据自己的喜好进行调整。

注意：我之所以使用 bottom 和 top 来为运动设置动画（而不是 translateY - 性能稍微好一点）是因为我想要这两个动画彼此完全独立，让我可以玩各种重叠的值和计时功能。我想出的并没有 100% 满足要求（例如，它稍微重叠了旋转和运动 - 但我是故意这样做的，因为不重叠它们看起来太机械了）。重叠时，整个动画看起来更加有机。这就像按钮还活着并且很高兴被要求制作动画。或者也许我只是有点疯狂，我不知道...

在类之间切换可防止动画播放，直接跳到结束

Toggling between classes keeps animation from going through, just skips to end

html

javascript

css

jquery

css-animations

在 类 之间切换可防止动画播放，直接跳到结束

Toggling between classes keeps animation from going through, just skips to end

html

javascript

css

jquery

css-animations

在类之间切换可防止动画播放，直接跳到结束