5 lines
26 KiB
JSON
5 lines
26 KiB
JSON
|
{
|
||
|
|
"id": "api/animations",
|
||
|
|
"title": "@angular/animations",
|
||
|
|
"contents": "\n\n<article>\n <div class=\"breadcrumb-container\">\n <div class=\"breadcrumb\">\n <script type=\"application/ld+json\">\n {\n \"@context\": \"http://schema.org\",\n \"@type\": \"BreadcrumbList\",\n \"itemListElement\": [\n { \"@type\": \"ListItem\", \"position\": 1, \"item\": { \"@id\": \"https://angular.io//api\", \"name\": \"API\" } },\n { \"@type\": \"ListItem\", \"position\": 2, \"item\": { \"@id\": \"https://angular.io/api/animations\", \"name\": \"@angular/animations\" } }\n ]\n }\n </script>\n <a href=\"/api\">API</a>\n </div>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/animations/PACKAGE.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 <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/animations/PACKAGE.md\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n \n<header class=\"api-header\">\n <h1 id=\"angularanimations\">@angular/animations<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/animations#angularanimations\"><i class=\"material-icons\">link</i></a></h1>\n <label class=\"api-type-label package\">package</label>\n \n \n \n</header>\n\n <aio-toc class=\"embedded\"></aio-toc>\n\n <div class=\"api-body\">\n <p>Implements a domain-specific language (DSL) for defining web animation sequences for HTML elements as\nmultiple transformations over time.</p>\n\n <p>Use this API to define how an HTML element can move, change color, grow or shrink, fade, or slide off\nthe page. These changes can occur simultaneously or sequentially. You can control the timing of each\nof these transformations. The function calls generate the data structures and metadata that enable Angular\nto integrate animations into templates and run them based on application states.</p>\n<p>Animation definitions are linked to components through the <code><a href=\"api/core/Component#animations\">animations</a></code>\nproperty in the <code>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a></code> metadata, typically in the component file of the HTML element to be animated.\nThe <code><a href=\"api/animations/trigger\" class=\"code-anchor\">trigger</a>()</code> function encapsulates a named animation, with all other function calls nested within. Use\nthe trigger name to bind the named animation to a specific triggering element in the HTML template.</p>\n<p>Angular animations are based on CSS web transition functionality, so anything that can be styled or\ntransformed in CSS can be animated the same way in Angular. Angular animations allow you to:</p>\n<ul>\n<li>Set animation timings, styles, keyframes, and transitions.</li>\n<li>Animate HTML elements in complex sequences and choreographies.</li>\n<li>Animate HTML elements as they are inserted and removed from the DOM, including responsive real-time\nfiltering.</li>\n<li>Create reusable animations.</li>\n<li>Animate parent and child elements.</li>\n</ul>\n<p>Additional animation functionality is provided in other Angular modules for animation testing, for\nroute-based animations, and for programmatic animation controls that allow an end user to fast forward\nand reverse an animation sequence.</p>\n\n\n \n<section class=\"see-also\">\n <h2 id=\"see-also\">See also<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/animations#see-also\"><i class=\"material-icons\">link</i></a></h2>\n <ul>\n \n <li><p>Find out more in the <a href=\"guide/animations\">animations guide</a>.</p>\n</li>\n <li><p>See what polyfills you might need in the <a href=\"guide/browser-support\">browser support guide</a>.</p>\n</li>\n </ul>\n</section>\n\n\n\n \n <h2 id=\"entry-points\">Entry po
|
||
|
|
}
|