在 Angular 中对 Tailwind 中的汉堡菜单进行动画处理

Question

我在 Angular 应用程序中使用 Tailwind UI，可以使用以下命令打开/关闭汉堡菜单

<header>
  <div class="-mr-2 -my-2 md:hidden">
    <button type="button" (click)="toggleMobileMenu()"
      class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
      <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
        aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>
  </div>
  <div class="absolute z-30 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden" *ngIf="mobileMenuOpen">
    <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y-2 divide-gray-50">

      <div class="flex items-center justify-between">
        <button (click)="toggleMobileMenu()" type="button"
          class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
            aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
      <div class="py-6 px-5">
        <div class="grid gap-4">
          <a routerLink="/" class="text-base font-medium text-gray-900 hover:text-gray-700">
            Home
          </a>
        </div>
      </div>
    </div>
  </div>
</header>


toggleMobileMenu() {
  this.mobileMenuOpen = !this.mobileMenuOpen;
}

这是一个非常简单的例子。

我如何制作这个动画？

说明是：

    Mobile menu, show/hide based on mobile menu state.

    Entering: "duration-200 ease-out"
      From: "opacity-0 scale-95"
      To: "opacity-100 scale-100"
    Leaving: "duration-100 ease-in"
      From: "opacity-100 scale-100"
      To: "opacity-0 scale-95"

我不知道如何将其转换为有角度的动画

Answer 1

以下是我将遵循的方法。

1. 确保导入BrowserAnimationsModule

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ... ],
  ...
})

2. 在你的@Component装饰器下创建animations数组，如下所示

@Component({
  ,,,,
  animations: [
    trigger("openClose", [
      // ...
      state(
        "open",
        style({
          opacity: 1,
          transform: "scale(1, 1)"
        })
      ),
      state(
        "closed",
        style({
          opacity: 0,
          transform: "scale(0.95, 0.95)"
        })
      ),
      transition("open => closed", [animate("100ms ease-in")]),
      transition("closed => open", [animate("200ms ease-out")])
    ])
  ]
})

在我们下面包含的动画数组中

• trigger("openClose", [ ...])它定义了触发器的名称。这将在 HTML 模板中用于绑定到 dom 元素

• 使用定义 2 个状态state('stateName'在上面的示例中，状态名称是open和closed

• 在状态下我们使用定义样式style({ ... })

• 我们最终使用 定义转换transition(...)。这将定义时间和动画风格

有关动画的更多信息角度动画

3. 为状态定义一个 getter

get openCloseTrigger() {
  return this.mobileMenuOpen ? "open" : "closed";
}

4. 将状态绑定到 HTML 中的 getter

<div [@openClose]="openCloseTrigger" ...> 
  <!-- Other stuff here -->
</div>

一切都应该准备就绪，并且您的菜单应该根据需要设置动画

在 stackblitz 上查看此演示

在导航时关闭浏览器 我们可以利用NavigationEnd事件来实现此功能。当用户位于特定页面上时，他们不会离开该页面，因此不会NavigationEnd。菜单将保持打开状态，但当他们导航到另一个页面时，NavigationEnd将调用事件并且菜单将关闭

这就是方法

constructor(private router: Router) {}
  navigationEnd$ = this.router.events.pipe(
    filter(event => event instanceof NavigationEnd),
    tap(() => (this.mobileMenuOpen = false))
  );

  ngOnInit() {
    this.navigationEnd$.subscribe();
  }

在 stackblitz 上查看此功能