Javascript 使用vuejs和tailwind平滑侧栏切换动画

我正在用vuejs和tailwind制作一个幻灯片边栏。它可以工作，但感觉有点迟钝。有没有办法让它更平滑

工作示例：

打开
接近
边栏
内容
.滑入激活状态{
动画：幻灯片1秒轻松；
}
.滑动保持活动状态{
动画：幻灯片1秒轻松反转；
}
@关键帧幻灯片{
0%{最大宽度：0%；}
50%{最大宽度：50%；}
100%{最大宽度：100%}
}

您应该使用

过渡

而不是

动画

，并以

宽度

属性为目标：

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

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