菜单打开和关闭动画

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;}菜单汉堡包是按钮，我使用 javascript 打开和关闭它，同时在我的按钮上添加 .classList.toggle(class - display: block)但是关闭动画并不像我想要的那样工作我也尝试使用 transform CSS 和其他东西，但它并没有像我在关键帧看到的那样给我安全效果我尝试在 CSS .opening {anination-name:opening, duration and etc.} 中做一个类，在我尝试用 javascript 添加它（切换、settimeout adn 等）之后，菜单关闭动画效果不佳

Answer 1

为此， atransition更合适：

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

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

     }