如何在此代码片段中正确使用CSS Transition属性？

Question

我希望我的主要内容在右侧的500ms处过渡，因为单击标题上的汉堡包图标时导航侧边栏将过渡到右侧。导航工作正常，并且在500ms内线性过渡。在两个组件的相应模板文件中，我添加了一个活动类，其属性为transition：所有500ms线性；导航侧栏工作正常，但主要内容突然向右移动，即过渡功能无法正常工作，我无法弄清CSS的问题所在。链接到源代码：https://stackblitz.com/edit/angular-qycauv

P.S。我是Web开发的新手，将不胜感激。

Answer 1

lists元素不会过渡，因为它不知道从何处过渡。您应先将left属性设置为0px，然后再将其转换为200px。像这样...

#lists.active {
    left: 200px;
}

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

Answer 2

尝试将transition: all 500ms linear;移至.container类而不是.active类