search

Murked / vue-tailwind-admin

A basic admin dashboard template built using Tailwind & Vue.js.
MIT License
417 stars 111 forks source link

Easing on sidebar #12

Closed kieron closed 3 years ago

kieron commented 3 years ago

Hey, I noticed the animation on the sidebar transition duration-500 ease-in-out doesn't seem to do anything- do you know why?

Thanks!

-- Edit

I just realised this isn't in the source, I have tried to make it animated, failed, forgot I did it, then thought it wasn't my own failure! :-)

I will reframe this into, how can I add animation in/out to the sidebar?

What I am struggling with is the fact that we keep the sidebar fixed & open on desktop, so you cant simply use if="sideBarOpen" to animate/hide/show etc. Curious how you would solve! :-)

Murked commented 3 years ago

Hi, the three classes you're using for animating the sidebar should be good from my memory, it is possible you have them on the wrong element though. You could try adding the "ease-in", "ease-out" classes in the sideBarOpen ternary check on the sidebar component. The tailwind version this source uses is kind of old now & i would make the sidebar component differently to make it work how you want it to. I plan on making a new updated version of this soon though.

kieron commented 3 years ago

Thank you!

I've ended up creating a separate mobile bar & desktop sidebar while keeping the content of the actual menu in a component, this has let me keep the sticky desktop bar & a toggleable and animated mobile bar. I just couldn't get it to work any other way ha!

Thanks :)

opencoca commented 3 years ago

Rather than have two menus I enjoy using a CSS breakpoint on the toggles.

On Sat, 20 Feb 2021, 04:57 Kieron, notifications@github.com wrote:

Thank you!

I've ended up creating a separate mobile bar & desktop sidebar while keeping the content of the actual menu in a component, this has let me keep the sticky desktop bar & a toggleable and animated mobile bar. I just couldn't get it to work any other way ha!

Thanks :)

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/Murked/vue-tailwind-admin/issues/12#issuecomment-782598218, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGKZRSBUXTX2LN2LW6KWJK3S76BP5ANCNFSM4XY5UAFA .

kieron commented 3 years ago

@opencoca Have you got an example by any chance? :-)