菜单打开和关闭动画答案

【问题标题】：Menu open and close animation菜单打开和关闭动画
【发布时间】：2020-10-16 14:19:52
【问题描述】：

我有问题，当我打开菜单时，我需要这样的动画：

@keyframes opening {
  from {
    clip-path: circle(0% at 5%, 10%)
  }

  to {
    clip-path: circle(100%)
  }
}

@keyframes closing {
  from {
    clip-path: circle(100%)
  }

  to {
    clip-path: circle(0% at 5%, 10%)
  }
}

在我的菜单上

.menu {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  background: #1f1f1f;
  display: none;
}

菜单汉堡是按钮，我使用 javascript 打开和关闭它，同时在我的按钮上添加 .classList.toggle(class - display: block)

但关闭动画不像我想要的那样工作

我也尝试使用变换 CSS 和其他东西，但它并没有像我在关键帧看到的那样给我安全的效果

我尝试在 CSS .opening {anination-name:opening, duration 等} 中做一个类，在我尝试使用 javascript（切换、settimeout 和等）添加它之后，菜单关闭动画没有任何效果

谢谢

【问题讨论】：

欢迎来到 Stackoverflow。你有小提琴给我们吗？很难以这种方式看到它以及您提供的有限代码。
请考虑缩小标题中的问题，例如“HTML 菜单打开/关闭动画”让用户可以更快地看到相关性。有许多使用菜单的技术。标签很好，继续使用它们，但它们需要额外的关注或搜索条件。

标签： javascript html css

【解决方案1】：

为此，transition 更合适：

document.addEventListener('click', () =>
  document.querySelector('.menu').classList.toggle('open')
)

.menu {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  background-color: #1f1f1f;
  clip-path: circle(0% at 5% 10%);
  transition: clip-path 2s;
}

.menu.open{
  clip-path: circle(100%);
}

<div class="menu" ></div>
Click anywhere to try out effect

【讨论】：

非常感谢，问题也出现在显示中：关闭时我的菜单中没有

【解决方案2】：

   Just adding basic demo code for your undestanding. 

.loader {
      width: 56px;
      height: 56px;
      border: 8px solid transparent;
      border-top-color: $warning;
      border-bottom-color: $warning;
      border-radius: 50%;
      animation: loader-rotate 1s linear infinite;
      top: 50%;
      margin: -28px auto 0;
    }
    
    @keyframes loader-rotate {
      0% {
        transform: rotate(0); }
      100% {
        transform: rotate(360deg); }
     }

【讨论】：