css - 如何在此代码段中正确使用 CSS 过渡属性？

Question

我希望我的主要内容在 500 毫秒后向右过渡，因为在单击标题上的汉堡包图标时导航侧边栏向右过渡。导航工作正常并以 500 毫秒线性传输。在这两个组件各自的模板文件中，我添加了一个事件类，其属性为 transition: all 500ms linear;导航侧边栏工作正常，但主要内容突然向右移动，即过渡工作不正常，我无法弄清楚 css 中有什么问题。源代码链接:https://stackblitz.com/edit/angular-qycauv

附言我是 Web 开发的新手，如有任何帮助，我们将不胜感激。

Answer 1

lists 元素不会转换，因为它不知道从哪里转换。在将其转换为 200px 之前，您应该首先将 left 属性设置为 0px。像这样...

#lists.active {
    left: 200px;
}

#lists {
    position: relative;
    left: 0px;
    transition: all 500ms linear;
}