5 lines
34 KiB
JSON
5 lines
34 KiB
JSON
|
{
|
||
|
|
"id": "guide/animations",
|
||
|
|
"title": "Introduction to Angular animations",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/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=\"introduction-to-angular-animations\">Introduction to Angular animations<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/animations#introduction-to-angular-animations\"><i class=\"material-icons\">link</i></a></h1>\n<p>Animation provides the illusion of motion: HTML elements change styling over time. Well-designed animations can make your application more fun and easier to use, but they aren't just cosmetic. Animations can improve your app and user experience in a number of ways:</p>\n<ul>\n<li>\n<p>Without animations, web page transitions can seem abrupt and jarring.</p>\n</li>\n<li>\n<p>Motion greatly enhances the user experience, so animations give users a chance to detect the application's response to their actions.</p>\n</li>\n<li>\n<p>Good animations intuitively call the user's attention to where it is needed.</p>\n</li>\n</ul>\n<p>Typically, animations involve multiple style <em>transformations</em> over time. An HTML element can move, change color, grow or shrink, fade, or slide off the page. These changes can occur simultaneously or sequentially. You can control the timing of each transformation.</p>\n<p>Angular's animation system is built on CSS functionality, which means you can animate any property that the browser considers animatable. This includes positions, sizes, transforms, colors, borders, and more. The W3C maintains a list of animatable properties on its <a href=\"https://www.w3.org/TR/css-transitions-1/\">CSS Transitions</a> page.</p>\n<h2 id=\"about-this-guide\">About this guide<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/animations#about-this-guide\"><i class=\"material-icons\">link</i></a></h2>\n<p>This guide covers the basic Angular animation features to get you started on adding Angular animations to your project.</p>\n<p>The features described in this guide — and the more advanced features described in the related Angular animations guides — are demonstrated in an example app available as a <live-example></live-example>.</p>\n<h4 id=\"prerequisites\">Prerequisites<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/animations#prerequisites\"><i class=\"material-icons\">link</i></a></h4>\n<p>The guide assumes that you're familiar with building basic Angular apps, as described in the following sections:</p>\n<ul>\n<li><a href=\"tutorial\">Tutorial</a></li>\n<li><a href=\"guide/architecture\">Architecture Overview</a></li>\n</ul>\n<h2 id=\"getting-started\">Getting started<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/animations#getting-started\"><i class=\"material-icons\">link</i></a></h2>\n<p>The main Angular modules for animations are <code>@angular/animations</code> and <code>@angular/platform-browser</code>. When you create a new project using the CLI, these dependencies are automatically added to your project.</p>\n<p>To get started with adding Angular animations to your project, import the animation-specific modules along with standard Angular functionality.</p>\n<h3 id=\"step-1-enabling-the-animations-module\">Step 1: Enabling the animations module<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/animations#step-1-enabling-the-animations-module\"><i class=\"material-icons\">link</i></a></h3>\n<p>Import <code><a href=\"api/platform-browser/animations/BrowserAnimationsModule\" class=\"code-anchor\">BrowserAnimationsModule</a></code>, which introduces the animation capabilities into your Angular root application module.</p>\n<code-example path=\"animations/src/app/app.module.1.ts\" header=\"src/app/app.module.ts\" langua
|
||
|
|
}
|