I'm trying to increase the speed of daisyui drawer opening and closing.
<div class="drawer" class:drawer-close={closeMenu}>
<input id="my-drawer" type="checkbox" class="drawer-toggle" />
<div class="drawer-content">
<slot />
</div>
<div class="drawer-side z-30 transition duration-75">
<label for="my-drawer" aria-label="close sidebar" class="drawer-overlay" />
<ul class="menu p-4 pt-22 w-full md:w-80 min-[1980px]:w-128 min-[1980px]:pl-24 min-h-full bg-base-200 text-base-content">
I tried to put "transition duration-75" tailwindcss class on each div of the drawer but without any effects. Is there a way to achieve that ?
The duration on the drawer and overlay are set via the
.drawer-side > .drawer-overlay {
transition-duration: 200ms;
}
.drawer-side > *:not(.drawer-overlay) {
transition-duration: 300ms;
}
selectors which are more specific and will override any additional duration-x
class.
Since a utility class is added inside a Svelte component, the same selectors set inside the component's <style>
tag will override the default ones
<style>
.drawer-side > .drawer-overlay {
transition-duration: 50ms;
}
.drawer-side > *:not(.drawer-overlay) {
transition-duration: 75ms;
}
</style>
->
.drawer-side.s-y_bCXRrkrYfP > .drawer-overlay.s-y_bCXRrkrYfP {
...
}
.drawer-side.s-y_bCXRrkrYfP > .s-y_bCXRrkrYfP:not(.drawer-overlay) {
...
}