javascript 带有vuej和tailwind的平滑侧边栏切换动画

tvz2xvvm  于 2022-12-25  发布在  Java
关注(0)|答案(1)|浏览(101)

我正在做一个有vuejs和tailwind的幻灯片侧边栏。它可以工作,但是感觉有点迟钝。有没有办法让它更流畅?
working codepen example

.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%}
}
<script src="https://unpkg.com/vue@3"></script>

  <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>
7uhlpewt

7uhlpewt1#

您应该使用transition而不是animation,并以width属性为目标:

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

相关问题