{"id":1905,"date":"2023-12-21T05:00:00","date_gmt":"2023-12-21T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1905"},"modified":"2023-12-20T16:04:49","modified_gmt":"2023-12-21T00:04:49","slug":"animated-route-transitions-with-angular-17","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/animated-route-transitions-with-angular-17\/","title":{"rendered":"Animated Route Transitions with Angular 17"},"content":{"rendered":"\n

Yesterday, we covered how to generate CSS animations<\/a> for our Angular applications. Today, let’s see how to use such animations as route transitions when navigating from one route to the next:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

The first thing we need to do is add the right providers for animations and transitions along with our routing config:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Then, we can create two different animations: One to exit the current “page” and one to enter the next “page.” In my example, I made two animations called entrance<\/code> and exit<\/code> using the CSS animation generator tool<\/a>:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Angular has two specific selectors for view transitions: ::view-transition-old(root)<\/code> for the exit of the old page and ::view-transition-new(root)<\/code> for the entrance of the new page. Our next step is to “plug” our animations into these selectors:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

And… that’s it! Router animations are now in place. You can see the code for that example in action on Stackblitz<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Yesterday, we covered how to generate CSS animations for our Angular applications. Today, let’s see how to use such animations as route transitions when navigating from one route to the next: The first thing we need to do is add the right providers for animations and transitions along with our routing config: Then, we can […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,42,25],"tags":[],"class_list":["post-1905","post","type-post","status-publish","format-standard","hentry","category-angular","category-css","category-routing"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1905","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1905"}],"version-history":[{"count":3,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1905\/revisions"}],"predecessor-version":[{"id":1912,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1905\/revisions\/1912"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1905"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1905"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1905"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}