Feat(docs) translate guide/animations/complex sequences create en.md file

adev-ja/src/content/guide/animations/complex-sequences.en.md

@@ -0,0 +1,145 @@
+# Complex animation sequences
+
+IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations/enter-and-leave). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps.
+
+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.
+
+The functions that control complex animation sequences are:
+
+| Functions                         | Details                                                        |
+| :-------------------------------- | :------------------------------------------------------------- |
+| `query()`                         | Finds one or more inner HTML elements.                         |
+| `stagger()`                       | Applies a cascading delay to animations for multiple elements. |
+| [`group()`](api/animations/group) | Runs multiple animation steps in parallel.                     |
+| `sequence()`                      | Runs animation steps one after another.                        |
+
+## The query() function
+
+Most complex animations rely on the `query()` function to find child elements and apply animations to them, basic examples of such are:
+
+| Examples                               | Details                                                                                                                                                                                               |
+| :------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `query()` followed by `animate()`      | Used to query simple HTML elements and directly apply animations to them.                                                                                                                             |
+| `query()` followed by `animateChild()` | Used to query child elements, which themselves have animations metadata applied to them and trigger such animation \(which would be otherwise be blocked by the current/parent element's animation\). |
+
+The first argument of `query()` is a [css selector](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors) string which can also contain the following Angular-specific tokens:
+
+| Tokens                     | Details                                      |
+| :------------------------- | :------------------------------------------- |
+| `:enter` <br /> `:leave`   | For entering/leaving elements.               |
+| `:animating`               | For elements currently animating.            |
+| `@*` <br /> `@triggerName` | For elements with any—or a specific—trigger. |
+| `:self`                    | The animating element itself.                |
+
+<docs-callout title="Entering and Leaving Elements">
+
+Not all child elements are actually considered as entering/leaving; this can, at times, be counterintuitive and confusing. Please see the [query api docs](api/animations/query#entering-and-leaving-elements) for more information.
+
+You can also see an illustration of this in the animations example \(introduced in the animations [introduction section](guide/legacy-animations#about-this-guide)\) under the Querying tab.
+
+</docs-callout>
+
+## Animate multiple elements using query() and stagger() functions
+
+After having queried child elements via `query()`, the `stagger()` function lets you define a timing gap between each queried item that is animated and thus animates elements with a delay between them.
+
+The following example demonstrates how to use the `query()` and `stagger()` functions to animate a list \(of heroes\) adding each in sequence, with a slight delay, from top to bottom.
+
+- Use `query()` to look for an element entering the page that meets certain criteria
+- For each of these elements, use `style()` to set the same initial style for the element.
+  Make it transparent and use `transform` to move it out of position so that it can slide into place.
+
+- Use `stagger()` to delay each animation by 30 milliseconds
+- Animate each element on screen for 0.5 seconds using a custom-defined easing curve, simultaneously fading it in and un-transforming it
+
+<docs-code header="hero-list-page.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.component.ts" region="page-animations"/>
+
+## Parallel animation using group() function
+
+You've seen how to add a delay between each successive animation.
+But you might also want to configure animations that happen in parallel.
+For example, you might want to animate two CSS properties of the same element but use a different `easing` function for each one.
+For this, you can use the animation [`group()`](api/animations/group) function.
+
+HELPFUL: The [`group()`](api/animations/group) function is used to group animation _steps_, rather than animated elements.
+
+The following example uses [`group()`](api/animations/group)s on both `:enter` and `:leave` for two different timing configurations, thus applying two independent animations to the same element in parallel.
+
+<docs-code header="hero-list-groups.component.ts (excerpt)" path="adev/src/content/examples/animations/src/app/hero-list-groups.component.ts" region="animationdef"/>
+
+## Sequential vs. parallel animations
+
+Complex animations can have many things happening at once.
+But what if you want to create an animation involving several animations happening one after the other? Earlier you used [`group()`](api/animations/group) to run multiple animations all at the same time, in parallel.
+
+A second function called `sequence()` lets you run those same animations one after the other.
+Within `sequence()`, the animation steps consist of either `style()` or `animate()` function calls.
+
+- Use `style()` to apply the provided styling data immediately.
+- Use `animate()` to apply styling data over a given time interval.
+
+## Filter animation example
+
+Take a look at another animation on the example page.
+Under the Filter/Stagger tab, enter some text into the **Search Heroes** text box, such as `Magnet` or `tornado`.
+
+The filter works in real time as you type.
+Elements leave the page as you type each new letter and the filter gets progressively stricter.
+The heroes list gradually re-enters the page as you delete each letter in the filter box.
+
+The HTML template contains a trigger called `filterAnimation`.
+
+<docs-code header="hero-list-page.component.html" path="adev/src/content/examples/animations/src/app/hero-list-page.component.html" region="filter-animations" language="angular-html"/>
+
+The `filterAnimation` in the component's decorator contains three transitions.
+
+<docs-code header="hero-list-page.component.ts" path="adev/src/content/examples/animations/src/app/hero-list-page.component.ts" region="filter-animations"/>
+
+The code in this example performs the following tasks:
+
+- Skips animations when the user first opens or navigates to this page \(the filter animation narrows what is already there, so it only works on elements that already exist in the DOM\)
+- Filters heroes based on the search input's value
+
+For each change:
+
+- Hides an element leaving the DOM by setting its opacity and width to 0
+- Animates an element entering the DOM over 300 milliseconds.
+  During the animation, the element assumes its default width and opacity.
+
+- If there are multiple elements entering or leaving the DOM, staggers each animation starting at the top of the page, with a 50-millisecond delay between each element
+
+## Animating the items of a reordering list
+
+Although Angular animates correctly `*ngFor` list items out of the box, it will not be able to do so if their ordering changes.
+This is because it will lose track of which element is which, resulting in broken animations.
+The only way to help Angular keep track of such elements is by assigning a `TrackByFunction` to the `NgForOf` directive.
+This makes sure that Angular always knows which element is which, thus allowing it to apply the correct animations to the correct elements all the time.
+
+IMPORTANT: If you need to animate the items of an `*ngFor` list and there is a possibility that the order of such items will change during runtime, always use a `TrackByFunction`.
+
+## Animations and Component View Encapsulation
+
+Angular animations are based on the components DOM structure and do not directly take [View Encapsulation](guide/components/styling#style-scoping) into account, this means that components using `ViewEncapsulation.Emulated` behave exactly as if they were using `ViewEncapsulation.None` (`ViewEncapsulation.ShadowDom` and `ViewEncapsulation.ExperimentalIsolatedShadowDom` behave differently as we'll discuss shortly).
+
+For example if the `query()` function (which you'll see more of in the rest of the Animations guide) were to be applied at the top of a tree of components using the emulated view encapsulation, such query would be able to identify (and thus animate) DOM elements on any depth of the tree.
+
+On the other hand the `ViewEncapsulation.ShadowDom` and `ViewEncapsulation.ExperimentalIsolatedShadowDom` changes the component's DOM structure by "hiding" DOM elements inside [`ShadowRoot`](https://developer.mozilla.org/docs/Web/API/ShadowRoot) elements. Such DOM manipulations do prevent some of the animations implementation to work properly since it relies on simple DOM structures and doesn't take `ShadowRoot` elements into account. Therefore it is advised to avoid applying animations to views incorporating components using the ShadowDom view encapsulation.
+
+## Animation sequence summary
+
+Angular functions for animating multiple elements start with `query()` to find inner elements; for example, gathering all images within a `<div>`.
+The remaining functions, `stagger()`, [`group()`](api/animations/group), and `sequence()`, apply cascades or let you control how multiple animation steps are applied.
+
+## More on Angular animations
+
+You might also be interested in the following:
+
+<docs-pill-row>
+  <docs-pill href="guide/legacy-animations" title="Introduction to Angular animations"/>
+  <docs-pill href="guide/legacy-animations/transition-and-triggers" title="Transition and triggers"/>
+  <docs-pill href="guide/legacy-animations/reusable-animations" title="Reusable animations"/>
+  <docs-pill href="guide/routing/route-transition-animations" title="Route transition animations"/>
+  <docs-pill href="guide/animations/migration" title="Migrating to Native CSS Animations"/>
+</docs-pill-row>

adev-ja/src/content/guide/animations/complex-sequences.md

@@ -1,10 +1,10 @@
-# 複雑なアニメーションシーケンス {#complex-animation-sequences}
+# 複雑なアニメーションシーケンス
 
-IMPORTANT: `@angular/animations` パッケージは現在非推奨です。Angularチームは、新しく書くコードのアニメーションには `animate.enter` と `animate.leave` を使ったネイティブCSSの利用を推奨します。詳しくは、新しい enter と leave の[アニメーションガイド](guide/animations/enter-and-leave)を参照してください。また、アプリで純粋なCSSアニメーションへの移行を始める方法については、[AngularのAnimationsパッケージからの移行](guide/animations/migration)も参照してください。
+IMPORTANT: `@angular/animations`パッケージは現在非推奨です。Angularチームは、新しく書くコードのアニメーションには`animate.enter`と`animate.leave`を使ったネイティブCSSの利用を推奨します。詳しくは、新しいenterとleaveの[アニメーションガイド](guide/animations/enter-and-leave)を参照してください。また、アプリケーションで純粋なCSSアニメーションへの移行を始める方法については、[AngularのAnimationsパッケージからの移行](guide/animations/migration)も参照してください。
 
 ここまで、単一のHTML要素のシンプルなアニメーションを学んできました。
 Angularでは、ページに出入りする要素のグリッド全体やリスト全体など、連携したシーケンスもアニメーション化できます。
-複数のアニメーションを並行して実行することも、個別のアニメーションを順番に実行することもできます。
+複数のアニメーションの同時実行と、個別アニメーションの順次実行の両方が可能です。
 
 複雑なアニメーションシーケンスを制御する関数は次のとおりです：
 
@@ -35,7 +35,7 @@ Angularでは、ページに出入りする要素のグリッド全体やリス
 
 <docs-callout title="enter と leave する要素">
 
-すべての子要素が実際に enter/leaveする要素として扱われるわけではありません。これは直感に反して混乱しやすい場合があります。詳しくは[queryのAPIドキュメント](api/animations/query#entering-and-leaving-elements)を参照してください。
+すべての子要素が実際にenter/leaveする要素として扱われるわけではありません。これは直感に反して混乱しやすい場合があります。詳しくは[queryのAPIドキュメント](api/animations/query#entering-and-leaving-elements)を参照してください。
 
 また、アニメーションの例\(アニメーションの[導入セクション](guide/legacy-animations#about-this-guide)で紹介します\)のQueryingタブでも、この挙動を図で確認できます。