转换“out”不起作用

Question

我有一个全宽的页面，当我点击按钮，菜单打开并且内容对齐时，如下所示：

当我点击菜单时，转换有效，但是当我关闭时没有。为什么呢？

// Style When the Menu is Opened
#page-content.page-active{
    width: calc(100% - 300px);
    position: absolute;
    right: 0;
    top: 0;
}

#page-content {
    width: 100%;
    padding: 10px 30px;
    transition: width 0.7s;
}

Answer 1

我为您创建了一个CodePen示例，您可以在其中看到菜单转换的工作原理。它使用绝对定位和宽度变化的组合。

菜单使用

向左偏移宽度

position: absolute;
left: -30%;

内容的宽度为100％。当菜单切换时，它会动画为left: 0;，而内容会将其宽度缩小到70％。您还可以使用width: 100%作为内容以使菜单重叠。

https://codepen.io/NikxDa/pen/JMdXWE