Is it possible to use tailwindcss transition with bordered tabs? #1156
-
|
Basically taken directly from the website <div class="tabs">
<a class="tab tab-bordered">Tab 1</a>
<a class="tab tab-bordered tab-active">Tab 2</a>
<a class="tab tab-bordered">Tab 3</a>
</div>Is it possible to animate the |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
It's not possible with the current style of daisyUI because when we add/remove class names, one tab loses style and the other tab gains the style. so unfortunately we can't animate it. I can't say it's not possible without JS but it will require some strict rules (like forcing all tabs to have the same width) and it needs some hacky HTML/CSS. As far as I know all tabs with animated indicator we see on the web are using JS to animate one indicator to move positions and resize to the current active tab. |
Beta Was this translation helpful? Give feedback.
It's not possible with the current style of daisyUI because when we add/remove class names, one tab loses style and the other tab gains the style. so unfortunately we can't animate it.
I can't say it's not possible without JS but it will require some strict rules (like forcing all tabs to have the same width) and it needs some hacky HTML/CSS.
As far as I know all tabs with animated indicator we see on the web are using JS to animate one indicator to move positions and resize to the current active tab.