使用 vuejs 和 tailwind 平滑侧边栏切换动画答案

【问题标题】：Smooth sidebar toggle animation with vuejs and tailwind使用 vuejs 和 tailwind 平滑侧边栏切换动画
【发布时间】：2021-01-22 22:15:58
【问题描述】：

我正在用 vuejs 和 tailwind 制作一个幻灯片侧边栏。它有效，但感觉有点迟钝。有没有办法让它更流畅？

工作示例：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>

【问题讨论】：

标签： javascript vue.js tailwind-css

【解决方案1】：

您应该使用transition 而不是animation 并定位width 属性：

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

LIVE DEMO

【讨论】：