Tailwind animation on display

Question

I am trying to learn how to use animation with Tailwind. The animation that I am trying hopelessly to make is:

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"

The element I'm trying to animate is:

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

Now I'm not quite sure exactly what to do since this animation should only run as soon as it is displayed I've attempted:

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

However this doesn't really give me an animated result. What can I try next?

Answer 1

If you use display:none and change it to display:block it will not fire your animation. You need to display the element first, and then animate. You can do that by setting display:block and then use requestAnimationFrame to apply the animation classes.

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

Alternatively, you could hide the element with something like opacity-0 invisible absolute z-[-1], then swap those classes for opacity-100 visible static or something similar. Just be careful the element is out of the way when it's hidden, because without display:none or hidden the element is still on the page.

Answer 2

Using dynamic style is not usually recommeded. Instead you could use && operator and display only if the showMenu is set to true

{ this.showMenu && <div class="absolute top-0 inset-x-0 p-2 duration-200 
ease-out transition transform origin-top-right"> }