在 Angular 中使用 Alpine JS 和 Tailwind UI

问题描述

我想将 TailwindUI 与 Angular 结合使用，但我在动画和过渡方面苦苦挣扎，因为 Angular 对动画的支持仅限于 css 样式而不是类，因此我无法使用 Tailwind 类。

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

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

index.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 -->

有什么想法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

alpine.js angular tailwind-css

在 Angular 中使用 Alpine JS 和 Tailwind UI

问题描述

解决方法

相关问答