7

I have a modal (written in React but that doesn't matter) and inside, I'm trying to add an accordion. I have the accordion sliding up and down nicely, my issue is that the height of the modal jumps up and down instantly based on the accordion transition.

Is there a way I can make the modal height grow in a transition along side the accordion? Thanks

Edit: Rephrase question.

Kurtis
  • 1,172
  • 2
  • 12
  • 20

1 Answers1

21

Add the following lines to your tailwind.config.js file and rebuild your CSS static files:

theme: {
    extend: {
      transitionProperty: {
        'height': 'height'
      }
    }
  }

Now you should be able to use height as a transition property:

transition-height duration-500 ease-in-out

If you want to simply test the animation, let's say on hovering over the accordion you can also add the following to the config file:

variants: {
    height: ['responsive', 'hover', 'focus']
}

if you now use the following classes on any div the animation should work smoothley:

bg-green-500 transition-height duration-500 ease-in-out h-8 hover:h-20

Cheers Alan

Tailwind docs: https://tailwindcss.com/docs/transition-property#app

Alan Rellek
  • 247
  • 1
  • 8
  • Thanks for responding and sorry for the very slow response, I've been off. My issues isnt that I cant get animations working. The accordion works and the modal transition (fade in when opening) works. The issue it the accordion inside a modal. The modal height jumps instantly and the accordion slides open. Do you know how to make the modal height grow in a transition? Thanks – Kurtis Nov 19 '20 at 09:55
  • 2
    Since I found this answer while looking for a way to simply apply a transition to height, it might be worth it to edit your post to reflect that this can be done by simply using `transition-all`, though it does not answer the OP's question. – J. Adam Connor Dec 29 '21 at 01:53
  • 1
    Please be aware that you cannot use multiple classes defined with `transitionProperty` at the same time, i.e. `transition-width` and `transition-height` since they will override each other. Instead consider adding `transitionProperty: { 'size': 'width, height' }` to your config instead. – Busti Mar 30 '23 at 00:23