时间戳

首页 > 解决方案 > 菜单打开和关闭动画

javascript - 菜单打开和关闭动画

问题描述

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

@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 and etc.} 中做一个类，在我尝试使用 javascript（切换、settimeout 等）添加它之后，菜单关闭动画没有任何效果

谢谢

标签： javascripthtmlcss

解决方案

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

推荐阅读