Html 如何使切换按钮在div'；它在滑动吗？Vue.js

我有一个div，当点击切换按钮时，它会滑动（从左向外/从左向内）。我正在使用Vue.js的过渡组件来处理幻灯片动画。div的幻灯片动画按预期工作，但我的问题是，切换按钮在div滑动（向外/向内）时无法与div保持一致。两者都嵌套在一个容器中

这是密码笔：

#应用程序{
宽度：100vw；
高度：100vh；
}
#容器{
z指数：1；
位置：绝对位置；
宽度：28%；
身高：100%；
显示器：flex；
背景色：白色；
#事件列表{
宽度：100%；
身高：100%；
背景：白色；
盒影：5px 5px 15px 0px rgba（0,0,0,0.3）；
}
.切换按钮{
边缘顶部：8px；
高度：48px；
背景色：rgba（255、255、255、0.9）；
左边框：1px实心#d4；
盒影：3px-1px7px0pxRGBA（0,0,0,0.3）；
大纲：无；
&：悬停{
光标：指针；
背景色：rgba（255、255、255、.5）；
}
}
}
.滑入滑出进入活动状态{
动画：滑入滑出0.5s反转；
}
.滑入滑出保持活动状态{
动画：滑入滑出0.5s；
}
@关键帧滑入滑出{
0% {
转化：translateX（0%）；
}
100% {
转化：translateX（-100%）；
}
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。在这一过程中，我完成了分子实验。毛里斯·法雷特拉是最伟大的。在瓦里乌斯，我在权贵间，在康格河，维韦拉·康塞奎特·菲利斯·利伯罗。佩伦茨克等级为tristique、ultrices tortor等级、consequat erat。努拉·奥纳雷·波特提托·尼索

切换

您可以使用具有

宽度的动画，而不是
变换：translateX（…）
并使用
溢出换行：断开单词防止文本溢出：

#event-list {
  ...
  overflow-wrap: break-word;
}

以及：


编辑：如果您喜欢幻灯片过渡，可以使用
左边距
而不是
宽度

@keyframes slide-in-out {
  0% {
    margin-left: 0%;
  }
  100% {
    margin-left: -100%;
  }
}

它符合我的要求，因此感谢您的回答，但我不喜欢面板滑动时文本的包装方式。它只是让它看起来更像是收缩过渡，而不是滑动过渡。我知道我在这里很挑剔，但从用户体验设计的角度来看，这对我来说是一个破坏者。我试图模仿的是谷歌地图面板。它比用宽度设置动画要好，但我仍然无法克服这样一个事实，即文本在转换过程中移动。
@keyframes slide-in-out {
  0% {
    margin-left: 0%;
  }
  100% {
    margin-left: -100%;
  }
}