angular - 在 Angular 中使用 Alpine JS 和 Tailwind UI

问题描述

我想将 TailwindUI 与 Angular 一起使用，但我在动画和过渡方面遇到了困难，因为 Angular 对动画的支持仅限于 css 样式而不是类，所以我不能使用 Tailwind 类。

因此，我希望将 Alpine JS 用于过渡和动画，并使用 Angular 属性绑定来绑定到 Alpine 属性，例如 x-show

这是一个引用 Alpine 库、绑定到 Alpine x-show 属性并通过单击按钮切换值的简单示例。我希望 div 隐藏/显示，但没有任何反应。

索引.html

  <html lang="en">
   <head>
     <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>
   </head>
   <body>
     <app-root></app-root>
   </body>
  </html>

还有我的 app.component.html 文件

<button (click)="isOpen = !isOpen">
    Toggle {{isOpen}}
</button>

<div [attr.x-show]="isOpen">SHOW</div> <!-- this does nothing even though x-show changes to false -->

有什么想法吗？

标签： angulartailwind-cssalpine.js

angular - 在 Angular 中使用 Alpine JS 和 Tailwind UI

问题描述

解决方案

推荐阅读