显示顺风动画

我正在尝试学习如何使用 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'}">

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

如果你使用display:none并将其更改为display:block它不会触发你的动画。您需要先显示元素，然后再制作动画。您可以通过设置来做到这一点display:block然后使用请求动画帧 https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame应用动画类。

function onShow() {
 this.isShown = true
 window.requestAnimationFrame( () => {
  this.animationClasses = "opacity-100 scale-100"
 })
}

或者，您可以使用类似的内容隐藏元素opacity-0 invisible absolute z-[-1]，然后将这些类交换为opacity-100 visible static或类似的东西。只是要小心该元素在隐藏时不会碍事，因为没有display:none or hidden该元素仍在页面上。