5 lines
16 KiB
JSON
5 lines
16 KiB
JSON
|
{
|
||
|
|
"id": "guide/complex-animation-sequences",
|
||
|
|
"title": "Complex animation sequences",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/complex-animation-sequences.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=\"complex-animation-sequences\">Complex animation sequences<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/complex-animation-sequences#complex-animation-sequences\"><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/complex-animation-sequences#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>So far, we've learned simple animations of single HTML elements. Angular also lets you animate coordinated sequences, such as an entire grid or list of elements as they enter and leave a page. You can choose to run multiple animations in parallel, or run discrete animations sequentially, one following another.</p>\n<p>Functions that control complex animation sequences are as follows:</p>\n<ul>\n<li><code><a href=\"api/animations/query\" class=\"code-anchor\">query</a>()</code> finds one or more inner HTML elements.</li>\n<li><code><a href=\"api/animations/stagger\" class=\"code-anchor\">stagger</a>()</code> applies a cascading delay to animations for multiple elements.</li>\n<li><a href=\"api/animations/group\"><code>group()</code></a> runs multiple animation steps in parallel.</li>\n<li><code><a href=\"api/animations/sequence\" class=\"code-anchor\">sequence</a>()</code> runs animation steps one after another.</li>\n</ul>\n<a id=\"complex-sequence\"></a>\n<h2 id=\"animate-multiple-elements-using-query-and-stagger-functions\">Animate multiple elements using query() and stagger() functions<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/complex-animation-sequences#animate-multiple-elements-using-query-and-stagger-functions\"><i class=\"material-icons\">link</i></a></h2>\n<p>The <code><a href=\"api/animations/query\" class=\"code-anchor\">query</a>()</code> function allows you to find inner elements within the element that is being animated. This function targets specific HTML elements within a parent component and applies animations to each element individually. Angular intelligently handles setup, teardown, and cleanup as it coordinates the elements across the page.</p>\n<p>The <code><a href=\"api/animations/stagger\" class=\"code-anchor\">stagger</a>()</code> function allows you to define a timing gap between each queried item that is animated and thus animates elements with a delay between them.</p>\n<p>The Filter/Stagger tab in the live example shows a list of heroes with an introductory sequence. The entire list of heroes cascades in, with a slight delay from top to bottom.</p>\n<p>The following example demonstrates how to use <code><a href=\"api/animations/query\" class=\"code-anchor\">query</a>()</code> and <code><a href=\"api/animations/stagger\" class=\"code-anchor\">stagger</a>()</code> functions on the entry of an animated element.</p>\n<ul>\n<li>\n<p>Use <code><a href=\"api/animations/query\" class=\"code-anchor\">query</a>()</code> to look for an element entering the page that meets certain criteria.</p>\n</li>\n<li>\n<p>For each of these elements, use <code><a href=\"api/animations/style\" class=\"code-anchor\">style</a>()</code> to set the same initial style for the element. Make it invisible and use <code>transform</code> to move it out of position so that it can slide into place.</p>\n</li>\n<li>\n<p>Use <code><a href=\"api/animations/stagger\" class=\"code-anchor\">stagger</a>()</code> t
|
||
|
|
}
|