5 lines
6.4 KiB
JSON
5 lines
6.4 KiB
JSON
|
{
|
||
|
|
"id": "guide/reusable-animations",
|
||
|
|
"title": "Reusable animations",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/reusable-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=\"reusable-animations\">Reusable animations<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/reusable-animations#reusable-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/reusable-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</ul>\n<hr>\n<p>The <a href=\"api/animations/AnimationOptions\">AnimationOptions</a> interface in Angular animations enables you to create animations that you can reuse across different components.</p>\n<h2 id=\"creating-reusable-animations\">Creating reusable animations<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/reusable-animations#creating-reusable-animations\"><i class=\"material-icons\">link</i></a></h2>\n<p>To create a reusable animation, use the <a href=\"api/animations/animation\"><code>animation()</code></a> method to define an animation in a separate <code>.ts</code> file and declare this animation definition as a <code>const</code> export variable. You can then import and reuse this animation in any of your app components using the <a href=\"api/animations/useAnimation\"><code>useAnimation()</code></a> API.</p>\n<code-example path=\"animations/src/app/animations.ts\" header=\"src/app/animations.ts\" region=\"reusable\" language=\"typescript\">\nimport {\n <a href=\"api/animations/animation\" class=\"code-anchor\">animation</a>, <a href=\"api/animations/trigger\" class=\"code-anchor\">trigger</a>, <a href=\"api/animations/animateChild\" class=\"code-anchor\">animateChild</a>, group,\n <a href=\"api/animations/transition\" class=\"code-anchor\">transition</a>, <a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>, <a href=\"api/animations/style\" class=\"code-anchor\">style</a>, <a href=\"api/animations/query\" class=\"code-anchor\">query</a>\n} from '@angular/animations';\n\nexport const transAnimation = <a href=\"api/animations/animation\" class=\"code-anchor\">animation</a>([\n <a href=\"api/animations/style\" class=\"code-anchor\">style</a>({\n height: '{{ height }}',\n opacity: '{{ opacity }}',\n backgroundColor: '{{ backgroundColor }}'\n }),\n <a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>('{{ time }}')\n]);\n\n</code-example>\n<p>In the above code snippet, <code>transAnimation</code> is made reusable by declaring it as an export variable.</p>\n<div class=\"alert is-helpful\">\n<p><strong>Note:</strong> The <code>height</code>, <code>opacity</code>, <code>backgroundColor</code>, and <code>time</code> inputs are replaced during runtime.</p>\n</div>\n<p>You can import the reusable <code>transAnimation</code> variable in your component class and reuse it using the <code><a href=\"api/animations/useAnimation\" class=\"code-anchor\">useAnimation</a>()</code> method as shown below.</p>\n<code-example path=\"animations/src/app/open-close.component.3.ts\" header=\"src/app/open-close.component.ts\" region=\"reusable\" language=\"typescript\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a> } from '@angular/core';\nimport { <a href=\"api/animations/transition\" class=\"code-anchor\">transition</a>, <a href=\"api/animations/trigger\" class=\"code-anchor\">trigger</a>, <a href=\"api/animations/useAnimation\" class=\"code-anchor\">useAnimation</a> } from '@angular/animations';\nimpo
|
||
|
|
}
|