Menu
Is there a way to animate the height property, this my simple code but the height isn't animated it just changed instantly
<div>
<a className="group flex items-center w-full pr-4 pb-2 text-gray-600 transition-transform transform rounded-md hover:translate-x-1 focus:outline-none focus:ring collapsed" onClick={() => { setSecond(!secondElement) }}>
<span className="ml-1 text-white text-xl group"> TITLE </span>
</a>
</div>
<div className={`transition-all duration-300 ease-in-out transform ${!secondElement ? 'h-0' : 'h-auto'} bg-blue mt-2 space-y-2 px-7`}>
<a
role="menuitem"
className="block p-2 text-sm text-white transition-colors duration-200 rounded-md dark:text-light dark:hover:text-light hover:text-gray-700">1</a>
<a
role="menuitem"
className="block p-2 text-sm text-white transition-colors duration-200 rounded-md dark:hover:text-light hover:text-gray-700">2</a>
</div>
</div>
338
Use h-{number} or h-px to set an element to a fixed height.
For animate the "height" of element with CSS Transitions you need use "max-height". If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.
To create a wiggle animation you can add the keyframes in tailwind. config. js file. With the @keyframes we define the Tailwind animation for when it is 0% and 100% complete, we want to rotate the element 3 degrees left, and when it is 50% complete we want to rotate the element 3 degrees right.
You can use them by appending square brackets containing a CSS value (e.g. [80%] ) to a prefix such as p- for padding or mr- for margin-right.
By default, Tailwind does not provide transition-property utilities for the height property. You'll need to add it to your tailwind.config.js file for the transition to work.
module.exports = {
theme: {
extend: {
transitionProperty: {
height: 'height'
}
}
}
}
From Tailwind v3, you can now use an arbitrary value to generate a one-off transition-property on the fly, without changing your tailwind.config.js file.
<div class="transition-[height]">
<!-- ... -->
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
