5 lines
42 KiB
JSON
5 lines
42 KiB
JSON
|
{
|
||
|
|
"id": "guide/transition-and-triggers",
|
||
|
|
"title": "Animations transitions and triggers",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/transition-and-triggers.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=\"animations-transitions-and-triggers\">Animations transitions and triggers<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/transition-and-triggers#animations-transitions-and-triggers\"><i class=\"material-icons\">link</i></a></h1>\n<p>You learned the basics of Angular animations in the <a href=\"guide/animations\">introduction</a> page.</p>\n<p>This guide goes into greater depth on special transition states such as <code>*</code> (wildcard) and <code>void</code>, and show how these special states are used for elements entering and leaving a view.\nThis chapter also explores multiple animation triggers, animation callbacks, and sequence-based animation using keyframes.</p>\n<h2 id=\"predefined-states-and-wildcard-matching\">Predefined states and wildcard matching<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/transition-and-triggers#predefined-states-and-wildcard-matching\"><i class=\"material-icons\">link</i></a></h2>\n<p>In Angular, transition states can be defined explicitly through the <code><a href=\"api/animations/state\" class=\"code-anchor\">state</a>()</code> function, or using the predefined <code>*</code> (wildcard) and <code>void</code> states.</p>\n<h3 id=\"wildcard-state\">Wildcard state<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/transition-and-triggers#wildcard-state\"><i class=\"material-icons\">link</i></a></h3>\n<p>An asterisk <code>*</code> or <em>wildcard</em> matches any animation state. This is useful for defining transitions that apply regardless of the HTML element's start or end state.</p>\n<p>For example, a transition of <code>open => *</code> applies when the element's state changes from open to anything else.</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/animations/wildcard-state-500.png\" alt=\"wildcard state expressions\" width=\"500\" height=\"229\">\n</div>\n<p>The following is another code sample using the wildcard state together with the previous example using the <code>open</code> and <code>closed</code> states.\nInstead of defining each state-to-state transition pair, any transition to <code>closed</code> takes 1 second, and any transition to <code>open</code> takes 0.5 seconds.</p>\n<p>This allows us to add new states without having to include separate transitions for each one.</p>\n<code-example header=\"src/app/open-close.component.ts\" path=\"animations/src/app/open-close.component.ts\" region=\"trigger-wildcard1\" language=\"typescript\">\nanimations: [\n <a href=\"api/animations/trigger\" class=\"code-anchor\">trigger</a>('openClose', [\n // ...\n <a href=\"api/animations/state\" class=\"code-anchor\">state</a>('open', <a href=\"api/animations/style\" class=\"code-anchor\">style</a>({\n height: '200px',\n opacity: 1,\n backgroundColor: 'yellow'\n })),\n <a href=\"api/animations/state\" class=\"code-anchor\">state</a>('closed', <a href=\"api/animations/style\" class=\"code-anchor\">style</a>({\n height: '100px',\n opacity: 0.5,\n backgroundColor: 'green'\n })),\n <a href=\"api/animations/transition\" class=\"code-anchor\">transition</a>('* => closed', [\n <a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>('1s')\n ]),\n <a href=\"api/animations/transition\" class=\"code-anchor\">transition</a>('* => open', [\n <a href=\"api/animations/animate\" class=\"code-anchor\">animate</a>('0.5s')\n ]),\n ]),\n],\n\n</code-example>\n<p>Use a double arrow syntax to specify state-to-state transitions in both directions.</p>\n<code-example header=\"src/app/open-close.component.ts\" path=
|
||
|
|
}
|