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

菜单汉堡包是按钮，我在我的按钮上添加.classList.toggle（class-display：block）时使用了javascript打开和关闭它

但是关闭动画无法像我想要的那样工作

我还尝试使用transform CSS和其他东西，但是它并没有像在关键帧上看到的那样给我带来安全效果

我尝试在CSS .opening {anination-name：opening，duration等}中创建一个类，并尝试使用javascript（toggle，settimeout adn等）添加菜单后，菜单关闭动画效果不佳

谢谢

Answer 1

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

Answer 2

为此，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 个答案: