Tailwind animation on display

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?

Tailwind animation on display

0 Answers