菜单打开和关闭动画

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', () =>&nbsp; document.querySelector('.menu').classList.toggle('open')).menu {&nbsp; position: fixed;&nbsp; height: 100vh;&nbsp; width: 100vw;&nbsp; top: 0;&nbsp; background-color: #1f1f1f;&nbsp; clip-path: circle(0% at 5% 10%);&nbsp; transition: clip-path 2s;}.menu.open{&nbsp; clip-path: circle(100%);}<div class="menu" ></div>Click anywhere to try out effect

Answer 2

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