Question

我有一个侧边栏组件我希望通过转换动画进出。我正在使用transform translateX（参见下面的CSS）。

但是，菜单没有正确显示动画。当我摆脱组件上的position: fixed css属性时它工作正常，但是，它使它看起来不像一个侧面菜单（它没有正确定位在屏幕上）。在位置固定的情况下，除了在动画结束之后才终止侧面菜单（及其中的元素）的背景颜色和位置之外，它的工作原理是有效的。

所以看起来很糟糕。我已经看了很多，在这里发现了类似的问题，但除了使用其他人预先构建的组件之外，没有什么能够让我找到解决方案。（我想避免这样做。）

这是我在webpack的vue-loader中的html（来自父组件）： -

<transition name="slide">
            <app-menu   v-if="menuToggled" 
                        :untoggle="toggleSidebar">
            </app-menu> 
        </transition>

这是div的sidemenu的CSS：

.menu {
        position: fixed; top: 0; left: 0; bottom: 0; right: 0; 
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: black; 
        padding: 10px;
        margin-right: 40px;
        text-align: center;
}

谢谢！这是我的第一个StackOverflow问题。我希望我不浪费任何人在这里的时间。我非常感谢任何形式的建设性指导。

Answer 1

我刚才想出来了。这是一个div放置问题。我的印象是＆＃34;单个元素＆＃34; vue组件＆＃39;模板html需要被包装成必须是div。我不知道你可以用你想要的任何标签包装任何东西。当我将外部元素转化为过渡本身时，一切都完美无缺！非常高兴的人现在。

Vuejs sidemenu过渡不适合位置：固定

1 个答案: