Vuejs 侧菜单过渡不适用于位置:固定

Question

我有一个侧边栏组件，我想通过过渡来制作动画。我正在使用转换翻译X(见下面的CSS(。

但是，菜单无法正确设置动画。但是，当我摆脱组件上的position: fixedcss 属性时，它工作正常，这使得它看起来不像侧菜单(它在屏幕上的位置不正确(。在位置固定的情况下，它的工作原理是侧菜单div(以及其中的元素(的背景颜色和位置直到动画结束后才会最终确定。

所以它看起来很恶心。我看遍了这里，发现了类似的问题，但除了使用其他人的预构建组件之外，没有任何让我找到解决方案。(我想避免这样做。

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

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

以下是div 的侧菜单 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 放置问题。我的印象是 vue 组件的模板 html 需要包装的"单个元素"必须是div。我不知道你可以用任何你想要的标签包装任何东西。当我将外部元素作为过渡本身时，一切都完美无缺！现在非常快乐的人。