7

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?

halfer
  • 19,824
  • 17
  • 99
  • 186
Marc Rasmussen
  • 19,771
  • 79
  • 203
  • 364
  • Are you using a JS framework? – JHeth Sep 25 '21 at 01:13
  • @JHeth i am using web components :) – Marc Rasmussen Sep 25 '21 at 09:31
  • The Tailwind UI docs have a section on [transitions](https://tailwindui.com/documentation#html-transitions) but they have a very strong emphasis on frameworks (Alpine is really the only example illustrated) which take care of adding/removing/switching states for you. You could recreate that concept but it would be quite a bit of work. However, the reason your example is not animating anything is because display is not an animatable property, there might be a way but your example does not have enough to reproduce functionality. – JHeth Sep 25 '21 at 22:55

1 Answers1

0

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"> }
krishnaacharyaa
  • 14,953
  • 4
  • 49
  • 88