Javascript 如何在transform translateX上应用转换

如何在Vue中的

transform:translateX

CSS属性上应用转换

我尝试过这种方法，但它不起作用，我希望在打开或关闭菜单时有一个平滑的滑入/滑出效果。我正在使用Vue和引导

<transition name="slide">
    <div class="collapse navbar-collapse position-fixed" :class="{ 'show': isVisible }" ref="menuLinks">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item" v-for="(item, index) in items" :key="index">
                <a class="nav-link" :href="item.link">{{ item.title }}</a>
            </li>
        </ul>
    </div>
</transition>

更新

我已从

中删除了转换。幻灯片按建议保持活动状态

，但没有任何更改

.slide-enter-active, .slide-enter {
    transition: transform 1s ease-in-out;
    animation: slideIn;
    animation-duration: 1s;
}

.slide-leave-active, .slide-leave-to {
    animation: slideOut;
    animation-duration: 1s;
}

---

你的幻灯片动画“transaletX”应该是“translateX”该死，谢谢，我没有注意到：）@Chrillewoodz修复了拼写错误，但似乎无法删除你的过渡，动画将处理过渡。我需要在哪里删除过渡？从主元素还是从vue转换类？在vue文档中，他们使用转换来产生SMMOSH效果

.slide-enter-active, .slide-enter {
    transition: transform 1s ease-in-out;
    animation: slideIn;
    animation-duration: 1s;
}

.slide-leave-active, .slide-leave-to {
    animation: slideOut;
    animation-duration: 1s;
}