在类之间切换使动画无法通过，只是跳到结束

Posted 2023-03-04

【中文标题】在类之间切换使动画无法通过，只是跳到结束

【英文标题】：Toggling between classes keeps animation from going through, just skips to end

【发布时间】：2022-01-18 02:22:57

【问题描述】：

我正在尝试通过将底线和顶线平移到中间然后旋转成 X 来为汉堡菜单设置动画，并希望在单击 X 时反转动画。使用 jquery 我正在切换类菜单打开和菜单关闭。当我删除菜单关闭动画的 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>

【问题讨论】：

你也可以添加html吗？

【参考方案1】：

以下是如何使用简单的 prop 值更改和谨慎的时间来做到这一点。我想这也可以使用@keyframe 动画来完成，但我发现它们更难以跟随/控制/同步，至少在这种情况下，考虑到它（基本上）是一个两步动画。

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% 遵守要求（例如，它与运动的旋转略有重叠 - 但我是故意这样做的，因为不重叠它们看起来太机械了）。当重叠时，整个动画看起来更加有机。就像按钮还活着并且很高兴被要求做动画一样。或者我只是有点疯狂，我不知道……