Vue过渡跳跃而不是滑动

Question

我正在尝试创建幻灯片动画，如下所示：

单击按钮后，div（即宽度和高度为100％）从屏幕右侧滑出并悬停整个页面。在新的div内部单击按钮后，它会滑到屏幕外的右侧。

所以第一步是从屏幕右侧平滑显示叠加层div，这可以正常工作 第二步是将隐藏的div平滑隐藏到屏幕之外，这是行不通的。

实时演示：http://two-house.com/

因此，在单击主页上的搜索按钮后，它应该很好地显示从右侧开始的重叠div。

然后，当您单击左上方“后退”按钮时，它应该隐藏，这是第二步，但不会滑动：（

我对该组件的Vue转换是：

<transition name="slide" mode="out-in">
    <search-panel v-show="!searchPanelCollapsed"></search-panel>
</transition>

.slide-leave-active {
    animation: slide-out .4s linear forwards;
}

@keyframes slide-out {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
@keyframes slide-in {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

奇怪的是，更难修复的是，它在运行npm run dev后可以在localhost正常工作，但是在服务器上隐藏的并不好。