Как правильно использовать свойство CSS-перехода в этом фрагменте кода?

Question

Я хочу, чтобы мой основной контент перешел на 500 мс вправо, так как навигационная боковая панель переходит вправо по щелчку значка гамбургера в заголовке.Навигация работает нормально и проходит линейно на 500 мс.В соответствующие файлы шаблонов обоих компонентов я добавил активный класс со свойством transition: все 500 мс линейные;Боковая панель навигации работает нормально, но основной контент внезапно смещается вправо, то есть переход не работает правильно, и я не могу понять, что не так в CSS.Ссылка на исходный код: https://stackblitz.com/edit/angular-qycauv

PS Я новичок в веб-разработке, любая помощь будет оценена.

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 класс