5 lines
24 KiB
JSON
5 lines
24 KiB
JSON
|
{
|
||
|
|
"id": "guide/route-animations",
|
||
|
|
"title": "Route transition animations",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/route-animations.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"route-transition-animations\">Route transition animations<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/route-animations#route-transition-animations\"><i class=\"material-icons\">link</i></a></h1>\n<h4 id=\"prerequisites\">Prerequisites<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/route-animations#prerequisites\"><i class=\"material-icons\">link</i></a></h4>\n<p>A basic understanding of the following concepts:</p>\n<ul>\n<li><a href=\"guide/animations\">Introduction to Angular animations</a></li>\n<li><a href=\"guide/transition-and-triggers\">Transition and triggers</a></li>\n<li><a href=\"guide/reusable-animations\">Reusable animations</a></li>\n</ul>\n<hr>\n<p>Routing enables users to navigate between different routes in an application. When a user navigates from one route to another, the Angular router maps the URL path to a relevant component and displays its view. Animating this route transition can greatly enhance the user experience.</p>\n<p>The Angular router comes with high-level animation functions that let you animate the transitions between views when a route changes. To produce an animation sequence when switching between routes, you need to define nested animation sequences. Start with the top-level component that hosts the view, and nest additional animations in the components that host the embedded views.</p>\n<p>To enable routing transition animation, do the following:</p>\n<ol>\n<li>Import the routing module into the application and create a routing configuration that defines the possible routes.</li>\n<li>Add a router outlet to tell the Angular router where to place the activated components in the DOM.</li>\n<li>Define the animation.</li>\n</ol>\n<p>Let's illustrate a router transition animation by navigating between two routes, <em>Home</em> and <em>About</em> associated with the <code>HomeComponent</code> and <code>AboutComponent</code> views respectively. Both of these component views are children of the top-most view, hosted by <code>AppComponent</code>. We'll implement a router transition animation that slides in the new view to the right and slides out the old view when the user navigates between the two routes.</p>\n<br>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/animations/route-animation.gif\" alt=\"Animations in action\" width=\"440\">\n</div>\n<h2 id=\"route-configuration\">Route configuration<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/route-animations#route-configuration\"><i class=\"material-icons\">link</i></a></h2>\n<p>To begin, configure a set of routes using methods available in the <code><a href=\"api/router/RouterModule\" class=\"code-anchor\">RouterModule</a></code> class. This route configuration tells the router how to navigate.</p>\n<p>Use the <code>RouterModule.forRoot</code> method to define a set of routes. Also, import this <code><a href=\"api/router/RouterModule\" class=\"code-anchor\">RouterModule</a></code> to the <code>imports</code> array of the main module, <code>AppModule</code>.</p>\n<div class=\"alert is-helpful\">\n<p><strong>Note:</strong> Use the <code>RouterModule.forRoot</code> method in the root module, <code>AppModule</code>, to register top-level application routes and providers. For feature modules, call the <code>RouterModule.forChild</code> method to register additional routes.</p>\n</div>\n<p>The following configuration defines the possible routes for the application.</p>\n<code-example path=\"animations/src/app/app.module.ts\" header=\"src/app/app.module.ts\" region=\"route-animation-data\" language=\"typescript\">\nimport { <a href
|
||
|
|
}
|