3
\$\begingroup\$

I'm making a slide sidebar with vuejs and tailwind. It works but feels kind of sluggish. Is there a way to make it smoother ?

working example: https://codepen.io/tuturu1014/pen/oNzRXeW

<button @click="isOpen = !isOpen" class="bg-blue-200 p-5">
  <span v-if="isOpen">Open</span>
  <span v-else>Close</span>
</button>
<div class="flex flex-row max-w-7xl mx-auto min-h-screen">
  <transition name="slide">
    <div class="flex flex-col w-64  shadow-xl sm:rounded-lg bg-blue-200" v-if="isOpen">
      <div class="min-h-screen">sidebar</div>
    </div>
  </transition>

  <div class="flex w-full  min-h-screen bg-red-400">
    content
  </div>
</div>
<style>
  .slide-enter-active {
    animation: slideIn 1s ease;
  }
  .slide-leave-active {
    animation: slideIn 1s ease reverse;
  }
  @keyframes slideIn {
    0%   {max-width: 0%;}
    50%   {max-width: 50%;}
    100% {max-width: 100%}
  }
<style>
\$\endgroup\$

1 Answer 1

1
\$\begingroup\$

You should use transition instead of animation and target the width property :

 .slide-enter-active, .slide-leave-active {
  transition: width 1s;
}
.slide-enter, .slide-leave-to{
  width:0;
}

LIVE DEMO

we could consider a transition as particular case of animation, the transition is applied when an element property changes (transition), but animation could be applied on any element infinitely or for some duration, you could watch the two first free videos on vue mastery that explain that clearly

\$\endgroup\$
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.