css - 显示顺风动画

Question

我正在尝试学习如何在 Tailwind 中使用动画。我绝望地尝试制作的动画是：

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"

我试图动画的元素是：

 <div class="absolute top-0 inset-x-0 p-2 duration-200 ease-out transition transform origin-top-right">

现在我不太确定该怎么做，因为这个动画应该只在我尝试过的显示后立即运行：

<div class="absolute top-0 inset-x-0 p-2 duration-200 
ease-out transition transform origin-top-right" style="${this.showMenu ? '' : 'display:none'}">

然而，这并没有真正给我一个动画结果。接下来我可以尝试什么？