菜单打开和关闭动画

Question

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

@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;
}

菜单hamburger是按钮，我使用javascript打开和关闭它，同时在我的按钮上添加。classlist.toggle（class-display:block）

但是结尾动画不像我想要的那样工作

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

我尝试在CSS中做一个类。Opening{anination-name:Opening，duration等}，在我尝试用javascript添加它之后（toggle，settimeout adn等），菜单关闭动画效果不佳

谢谢

Answer 1

为此，转换更合适:

null

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

css lang-css prettyprint-override">.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

Answer 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); }
     }