CODEWITHSUNDEEP
cssangular
Rishabh Kanwar
Rishabh Kanwar

Reputation: 25

How do I use the CSS transition property correctly in this code snippet?

I want my main content to transition at 500ms to the right as the Navigational Sidebar transits to the right on the click of a hamburger icon on the header. The navigation is working fine and transits linearly at 500ms. In the respective template files of both components I added an active class with the property, transition: all 500ms linear; The Navigation Sidebar works fine but the main content shifts to right abruptly, i.e. transition is not working correctly and I can't figure out what is wrong in the css. Link to the source code: https://stackblitz.com/edit/angular-qycauv

P.S. I am new to Web Development, any help would be appreciated.

Upvotes: 0

Views: 64

Answers (2)

Fabian Hijlkema
Fabian Hijlkema

Reputation: 391

The lists element does not transition because it doesn't know where to transition from. You should first set the left property to 0px, before transitioning it to 200px. Like so...

#lists.active {
    left: 200px;
}

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

Upvotes: 2

boosted_duck
boosted_duck

Reputation: 508

Try moving the transition: all 500ms linear; to the .container class and not on .active class

Upvotes: 0

Related Questions