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 points<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/animations#entry-points\"><i class=\"material-icons\">link</i></a></h2>\n \n \n \n <section class=\"export-list\">\n <h3 id=\"primary\">Primary<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/animations#primary\"><i class=\"material-icons\">link</i></a></h3>\n <table class=\"is-full-width list-table\">\n \n <tbody><tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations#primary-entry-point-exports\">@angular/animations</a></code></td>\n <td>\n \n <p>Implements a domain-specific language (DSL) for defining web animation sequences for HTML elements as\nmultiple transformations over time.</p>\n\n </td>\n </tr>\n \n </tbody></table>\n </section>\n \n\n \n \n \n <section class=\"export-list\">\n <h3 id=\"secondary\">Secondary<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/animations#secondary\"><i class=\"material-icons\">link</i></a></h3>\n <table class=\"is-full-width list-table\">\n \n <tbody><tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/browser\">@angular/animations/browser</a></code></td>\n <td>\n \n <p>Provides infrastructure for cross-platform rendering of animations in a browser.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/browser/testing\">@angular/animations/browser/testing</a></code></td>\n <td>\n \n <p>Provides infrastructure for testing of the Animations browser subsystem.</p>\n\n </td>\n </tr>\n \n </tbody></table>\n </section>\n \n\n \n\n <h2 id=\"primary-entry-point-exports\">Primary entry point exports<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/animations#primary-entry-point-exports\"><i class=\"material-icons\">link</i></a></h2>\n \n \n \n \n \n\n \n \n \n <section class=\"export-list\">\n <h3 id=\"classes\">Classes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/animations#classes\"><i class=\"material-icons\">link</i></a></h3>\n <table class=\"is-full-width list-table\">\n \n <tbody><tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/AnimationBuilder\">AnimationBuilder</a></code></td>\n <td>\n \n <p>An injectable service that produces an animation sequence programmatically within an\nAngular component or directive.\nProvided by the <code><a href=\"api/platform-browser/animations/BrowserAnimationsModule\" class=\"code-anchor\">BrowserAnimationsModule</a></code> or <code><a href=\"api/platform-browser/animations/NoopAnimationsModule\" class=\"code-anchor\">NoopAnimationsModule</a></code>.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/AnimationFactory\">AnimationFactory</a></code></td>\n <td>\n \n <p>A factory object returned from the <code><a href=\"api/animations/AnimationBuilder\" class=\"code-anchor\">AnimationBuilder</a></code>.<code>build()</code> method.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/NoopAnimationPlayer\">NoopAnimationPlayer</a></code></td>\n <td>\n \n <p>An empty programmatic controller for reusable animations.\nUsed internally when animations are disabled, to avoid\nchecking for the null case when an animation player is expected.</p>\n\n </td>\n </tr>\n \n </tbody></table>\n </section>\n \n\n \n \n \n\n \n \n \n <section class=\"export-list\">\n <h3 id=\"functions\">Functions<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/animations#functions\"><i class=\"material-icons\">link</i></a></h3>\n <table class=\"is-full-width list-table\">\n \n <tbody><tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/animate\">animate</a></code></td>\n <td>\n \n <p>Defines an animation step that combines styling information with timing information.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/animateChild\">animateChild</a></code></td>\n <td>\n \n <p>Executes a queried inner animation element within an animation sequence.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/animation\">animation</a></code></td>\n <td>\n \n <p>Produces a reusable animation that can be invoked in another animation or sequence,\nby calling the <code><a href=\"api/animations/useAnimation\" class=\"code-anchor\">useAnimation</a>()</code> function.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/group\">group</a></code></td>\n <td>\n \n <p>Defines a list of animation steps to be run in parallel.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/keyframes\">keyframes</a></code></td>\n <td>\n \n <p>Defines a set of animation styles, associating each style with an optional <code>offset</code> value.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/query\">query</a></code></td>\n <td>\n \n <p>Finds one or more inner elements within the current element that is\nbeing animated within a sequence. Use with <code><a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>()</code>.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/sequence\">sequence</a></code></td>\n <td>\n \n <p>Defines a list of animation steps to be run sequentially, one by one.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/stagger\">stagger</a></code></td>\n <td>\n \n <p>Use within an animation <code><a href=\"api/animations/query\" class=\"code-anchor\">query</a>()</code> call to issue a timing gap after\neach queried item is animated.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/state\">state</a></code></td>\n <td>\n \n <p>Declares an animation state within a trigger attached to an element.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/style\">style</a></code></td>\n <td>\n \n <p>Declares a key/value object containing CSS properties/styles that\ncan then be used for an animation <code><a href=\"api/animations/state\" class=\"code-anchor\">state</a></code>, within an animation <code><a href=\"api/animations/sequence\" class=\"code-anchor\">sequence</a></code>,\nor as styling data for calls to <code><a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>()</code> and <code><a href=\"api/animations/keyframes\" class=\"code-anchor\">keyframes</a>()</code>.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/transition\">transition</a></code></td>\n <td>\n \n <p>Declares an animation transition as a sequence of animation steps to run when a given\ncondition is satisfied. The condition is a Boolean expression or function that compares\nthe previous and current animation states, and returns true if this transition should occur.\nWhen the state criteria of a defined transition are met, the associated animation is\ntriggered.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/trigger\">trigger</a></code></td>\n <td>\n \n <p>Creates a named animation trigger, containing a list of <code><a href=\"api/animations/state\" class=\"code-anchor\">state</a>()</code>\nand <code><a href=\"api/animations/transition\" class=\"code-anchor\">transition</a>()</code> entries to be evaluated when the expression\nbound to the trigger changes.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/useAnimation\">useAnimation</a></code></td>\n <td>\n \n <p>Starts a reusable animation that is created using the <code><a href=\"api/animations/animation\" class=\"code-anchor\">animation</a>()</code> function.</p>\n\n </td>\n </tr>\n \n </tbody></table>\n </section>\n \n\n \n \n \n <section class=\"export-list\">\n <h3 id=\"structures\">Structures<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/animations#structures\"><i class=\"material-icons\">link</i></a></h3>\n <table class=\"is-full-width list-table\">\n \n <tbody><tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/AnimateChildOptions\">AnimateChildOptions</a></code></td>\n <td>\n \n <p>Adds duration options to control animation styling and timing for a child animation.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/AnimationAnimateChildMetadata\">AnimationAnimateChildMetadata</a></code></td>\n <td>\n \n <p>Encapsulates a child animation, that can be run explicitly when the parent is run.\nInstantiated and returned by the <code><a href=\"api/animations/animateChild\" class=\"code-anchor\">animateChild</a></code> function.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/AnimationAnimateMetadata\">AnimationAnimateMetadata</a></code></td>\n <td>\n \n <p>Encapsulates an animation step. Instantiated and returned by\nthe <code><a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>()</code> function.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/AnimationAnimateRefMetadata\">AnimationAnimateRefMetadata</a></code></td>\n <td>\n \n <p>Encapsulates a reusable animation.\nInstantiated and returned by the <code><a href=\"api/animations/useAnimation\" class=\"code-anchor\">useAnimation</a>()</code> function.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/AnimationEvent\">AnimationEvent</a></code></td>\n <td>\n \n <p>An instance of this class is returned as an event parameter when an animation\ncallback is captured for an animation either during the start or done phase.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/AnimationGroupMetadata\">AnimationGroupMetadata</a></code></td>\n <td>\n \n <p>Encapsulates an animation group.\nInstantiated and returned by the <code><a href=\"api/animations/group\">group()</a></code> function.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/AnimationKeyframesSequenceMetadata\">AnimationKeyframesSequenceMetadata</a></code></td>\n <td>\n \n <p>Encapsulates a keyframes sequence. Instantiated and returned by\nthe <code><a href=\"api/animations/keyframes\" class=\"code-anchor\">keyframes</a>()</code> function.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/AnimationMetadata\">AnimationMetadata</a></code></td>\n <td>\n \n <p>Base for animation data structures.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/AnimationMetadataType\">AnimationMetadataType</a></code></td>\n <td>\n \n <p>Constants for the categories of parameters that can be defined for animations.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/AnimationOptions\">AnimationOptions</a></code></td>\n <td>\n \n <p>Options that control animation styling and timing.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/AnimationPlayer\">AnimationPlayer</a></code></td>\n <td>\n \n <p>Provides programmatic control of a reusable animation sequence,\nbuilt using the <code>build()</code> method of <code><a href=\"api/animations/AnimationBuilder\" class=\"code-anchor\">AnimationBuilder</a></code>. The <code>build()</code> method\nreturns a factory, whose <code>create()</code> method instantiates and initializes this interface.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/AnimationQueryMetadata\">AnimationQueryMetadata</a></code></td>\n <td>\n \n <p>Encapsulates an animation query. Instantiated and returned by\nthe <code><a href=\"api/animations/query\" class=\"code-anchor\">query</a>()</code> function.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/AnimationQueryOptions\">AnimationQueryOptions</a></code></td>\n <td>\n \n <p>Encapsulates animation query options.\nPassed to the <code><a href=\"api/animations/query\" class=\"code-anchor\">query</a>()</code> function.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/AnimationReferenceMetadata\">AnimationReferenceMetadata</a></code></td>\n <td>\n \n <p>Encapsulates a reusable animation, which is a collection of individual animation steps.\nInstantiated and returned by the <code><a href=\"api/animations/animation\" class=\"code-anchor\">animation</a>()</code> function, and\npassed to the <code><a href=\"api/animations/useAnimation\" class=\"code-anchor\">useAnimation</a>()</code> function.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/AnimationSequenceMetadata\">AnimationSequenceMetadata</a></code></td>\n <td>\n \n <p>Encapsulates an animation sequence.\nInstantiated and returned by the <code><a href=\"api/animations/sequence\" class=\"code-anchor\">sequence</a>()</code> function.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/AnimationStaggerMetadata\">AnimationStaggerMetadata</a></code></td>\n <td>\n \n <p>Encapsulates parameters for staggering the start times of a set of animation steps.\nInstantiated and returned by the <code><a href=\"api/animations/stagger\" class=\"code-anchor\">stagger</a>()</code> function.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/AnimationStateMetadata\">AnimationStateMetadata</a></code></td>\n <td>\n \n <p>Encapsulates an animation state by associating a state name with a set of CSS styles.\nInstantiated and returned by the <code><a href=\"api/animations/state\" class=\"code-anchor\">state</a>()</code> function.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/AnimationStyleMetadata\">AnimationStyleMetadata</a></code></td>\n <td>\n \n <p>Encapsulates an animation style. Instantiated and returned by\nthe <code><a href=\"api/animations/style\" class=\"code-anchor\">style</a>()</code> function.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/AnimationTransitionMetadata\">AnimationTransitionMetadata</a></code></td>\n <td>\n \n <p>Encapsulates an animation transition. Instantiated and returned by the\n<code><a href=\"api/animations/transition\" class=\"code-anchor\">transition</a>()</code> function.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/AnimationTriggerMetadata\">AnimationTriggerMetadata</a></code></td>\n <td>\n \n <p>Contains an animation trigger. Instantiated and returned by the\n<code><a href=\"api/animations/trigger\" class=\"code-anchor\">trigger</a>()</code> function.</p>\n\n </td>\n </tr>\n \n </tbody></table>\n </section>\n \n\n \n \n \n\n \n \n \n\n \n \n \n <section class=\"export-list\">\n <h3 id=\"types\">Types<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/animations#types\"><i class=\"material-icons\">link</i></a></h3>\n <table class=\"is-full-width list-table\">\n \n <tbody><tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/AUTO_STYLE\">AUTO_STYLE</a></code></td>\n <td>\n \n <p>Specifies automatic styling.</p>\n\n </td>\n </tr>\n \n <tr>\n <td><code class=\"code-anchor\"><a href=\"api/animations/AnimateTimings\">AnimateTimings</a></code></td>\n <td>\n \n <p>Represents animation-step timing parameters for an animation step.</p>\n\n </td>\n </tr>\n \n </tbody></table>\n </section>\n \n\n </div>\n</article>\n\n<!-- links to this doc:\n - api/animations/AUTO_STYLE\n - api/animations/AnimateChildOptions\n - api/animations/AnimateTimings\n - api/animations/AnimationAnimateChildMetadata\n - api/animations/AnimationAnimateMetadata\n - api/animations/AnimationAnimateRefMetadata\n - api/animations/AnimationBuilder\n - api/animations/AnimationEvent\n - api/animations/AnimationFactory\n - api/animations/AnimationGroupMetadata\n - api/animations/AnimationKeyframesSequenceMetadata\n - api/animations/AnimationMetadata\n - api/animations/AnimationMetadataType\n - api/animations/AnimationOptions\n - api/animations/AnimationPlayer\n - api/animations/AnimationQueryMetadata\n - api/animations/AnimationQueryOptions\n - api/animations/AnimationReferenceMetadata\n - api/animations/AnimationSequenceMetadata\n - api/animations/AnimationStaggerMetadata\n - api/animations/AnimationStateMetadata\n - api/animations/AnimationStyleMetadata\n - api/animations/AnimationTransitionMetadata\n - api/animations/AnimationTriggerMetadata\n - api/animations/NoopAnimationPlayer\n - api/animations/animate\n - api/animations/animateChild\n - api/animations/animation\n - api/animations/browser\n - api/animations/browser/AnimationDriver\n - api/animations/browser/testing\n - api/animations/browser/testing/MockAnimationDriver\n - api/animations/browser/testing/MockAnimationPlayer\n - api/animations/group\n - api/animations/keyframes\n - api/animations/query\n - api/animations/sequence\n - api/animations/stagger\n - api/animations/state\n - api/animations/style\n - api/animations/transition\n - api/animations/trigger\n - api/animations/useAnimation\n - guide/animations\n - guide/npm-packages\n-->\n<!-- links from this doc:\n - /api\n - api/animations#angularanimations\n - api/animations#classes\n - api/animations#entry-points\n - api/animations#functions\n - api/animations#primary\n - api/animations#primary-entry-point-exports\n - api/animations#secondary\n - api/animations#see-also\n - api/animations#structures\n - api/animations#types\n - api/animations/AUTO_STYLE\n - api/animations/AnimateChildOptions\n - api/animations/AnimateTimings\n - api/animations/AnimationAnimateChildMetadata\n - api/animations/AnimationAnimateMetadata\n - api/animations/AnimationAnimateRefMetadata\n - api/animations/AnimationBuilder\n - api/animations/AnimationEvent\n - api/animations/AnimationFactory\n - api/animations/AnimationGroupMetadata\n - api/animations/AnimationKeyframesSequenceMetadata\n - api/animations/AnimationMetadata\n - api/animations/AnimationMetadataType\n - api/animations/AnimationOptions\n - api/animations/AnimationPlayer\n - api/animations/AnimationQueryMetadata\n - api/animations/AnimationQueryOptions\n - api/animations/AnimationReferenceMetadata\n - api/animations/AnimationSequenceMetadata\n - api/animations/AnimationStaggerMetadata\n - api/animations/AnimationStateMetadata\n - api/animations/AnimationStyleMetadata\n - api/animations/AnimationTransitionMetadata\n - api/animations/AnimationTriggerMetadata\n - api/animations/NoopAnimationPlayer\n - api/animations/animate\n - api/animations/animateChild\n - api/animations/animation\n - api/animations/browser\n - api/animations/browser/testing\n - api/animations/group\n - api/animations/keyframes\n - api/animations/query\n - api/animations/sequence\n - api/animations/stagger\n - api/animations/state\n - api/animations/style\n - api/animations/transition\n - api/animations/trigger\n - api/animations/useAnimation\n - api/core/Component\n - api/core/Component#animations\n - api/platform-browser/animations/BrowserAnimationsModule\n - api/platform-browser/animations/NoopAnimationsModule\n - guide/animations\n - guide/browser-support\n - https://github.com/angular/angular/edit/master/packages/animations/PACKAGE.md?message=docs(...)%3A%20describe%20your%20change...\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/animations/PACKAGE.md\n-->"
}