Smooth sidebar toggle animation with vuejs and tailwind 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
&lt;button @click=&quot;isOpen = !isOpen&quot; class=&quot;bg-blue-200 p-5&quot;&gt;
  &lt;span v-if=&quot;isOpen&quot;&gt;Open&lt;/span&gt;
  &lt;span v-else&gt;Close&lt;/span&gt;
&lt;/button&gt;
&lt;div class=&quot;flex flex-row max-w-7xl mx-auto min-h-screen&quot;&gt;
  &lt;transition name=&quot;slide&quot;&gt;
    &lt;div class=&quot;flex flex-col w-64  shadow-xl sm:rounded-lg bg-blue-200&quot; v-if=&quot;isOpen&quot;&gt;
      &lt;div class=&quot;min-h-screen&quot;&gt;sidebar&lt;/div&gt;
    &lt;/div&gt;
  &lt;/transition&gt;

  &lt;div class=&quot;flex w-full  min-h-screen bg-red-400&quot;&gt;
    content
  &lt;/div&gt;
&lt;/div&gt;
&lt;style&gt;
  .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%}
  }
&lt;style&gt;
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