diff --git a/adev-ja/src/content/guide/animations/complex-sequences.md b/adev-ja/src/content/guide/animations/complex-sequences.md index ddd3fe389..ad24d672b 100644 --- a/adev-ja/src/content/guide/animations/complex-sequences.md +++ b/adev-ja/src/content/guide/animations/complex-sequences.md @@ -1,145 +1,145 @@ -# Complex animation sequences +# 複雑なアニメーションシーケンス {#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. +IMPORTANT: `@angular/animations` パッケージは現在非推奨です。Angularチームは、新しく書くコードのアニメーションには `animate.enter` と `animate.leave` を使ったネイティブCSSの利用を推奨します。詳しくは、新しい enter と leave の[アニメーションガイド](guide/animations/enter-and-leave)を参照してください。また、アプリで純粋なCSSアニメーションへの移行を始める方法については、[AngularのAnimationsパッケージからの移行](guide/animations/migration)も参照してください。 -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. +ここまで、単一のHTML要素のシンプルなアニメーションを学んできました。 +Angularでは、ページに出入りする要素のグリッド全体やリスト全体など、連携したシーケンスもアニメーション化できます。 +複数のアニメーションを並行して実行することも、個別のアニメーションを順番に実行することもできます。 -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. | +| `query()` | 内側のHTML要素を1つ以上見つけます。 | +| `stagger()` | 複数要素のアニメーションに段階的な遅延を適用します。 | +| [`group()`](api/animations/group) | 複数のアニメーションステップを並行して実行します。 | +| `sequence()` | アニメーションステップを順番に実行します。 | -## The query() function +## query() 関数 {#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: +多くの複雑なアニメーションは、`query()` 関数で子要素を見つけ、それらにアニメーションを適用することに依存します。基本的な例は次のとおりです： -| 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\). | +| `query()` の後に `animate()` | 単純なHTML要素をクエリし、直接アニメーションを適用するために使用します。 | +| `query()` の後に `animateChild()` | それ自体にアニメーションメタデータが適用された子要素をクエリし、そのアニメーションをトリガーします\(そうしないと、現在の要素／親要素のアニメーションによってブロックされてしまいます\)。 | -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: +`query()` の最初の引数は [CSSセレクター](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors) 文字列で、次のAngular固有のトークンも含められます： -| Tokens | Details | +| トークン | 詳細 | | :------------------------- | :------------------------------------------- | -| `:enter`
`:leave` | For entering/leaving elements. | -| `:animating` | For elements currently animating. | -| `@*`
`@triggerName` | For elements with any—or a specific—trigger. | -| `:self` | The animating element itself. | +| `:enter`
`:leave` | enter/leaveする要素用。 | +| `:animating` | 現在アニメーション中の要素用。 | +| `@*`
`@triggerName` | 任意のトリガー、または特定のトリガーを持つ要素用。 | +| `:self` | アニメーション対象の要素自身。 | - + -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. +すべての子要素が実際に enter/leaveする要素として扱われるわけではありません。これは直感に反して混乱しやすい場合があります。詳しくは[queryのAPIドキュメント](api/animations/query#entering-and-leaving-elements)を参照してください。 -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. +また、アニメーションの例\(アニメーションの[導入セクション](guide/legacy-animations#about-this-guide)で紹介します\)のQueryingタブでも、この挙動を図で確認できます。 -## Animate multiple elements using query() and stagger() functions +## query() と stagger() 関数を使って複数の要素をアニメーション化する {#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. +`query()` で子要素をクエリしたあと、`stagger()` 関数を使うと、アニメーション化される各項目の間に時間差を定義でき、要素を順番に遅らせてアニメーションできます。 -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. +次の例は、`query()` と `stagger()` 関数を使って、（ヒーローの）リストに要素を追加するときに、上から下へ少しずつ遅らせながら順番にアニメーションする方法を示します。 -- 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. +- `query()` を使って、特定の条件を満たしてページに入ってくる要素を探します。 +- それぞれの要素に対して、`style()` を使い、同じ初期スタイルを設定します。 + 透明にし、`transform` を使って位置をずらしておくことで、所定の位置にスライドして入ってくるようにします。 -- 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 +- `stagger()` を使って各アニメーションを30ミリ秒ずつ遅らせます。 +- カスタム定義のイージングカーブを使って各要素を0.5秒かけてアニメーションし、フェードインと`transform`の解除を同時に行います。 -## Parallel animation using group() function +## group() 関数を使った並行アニメーション {#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. +ここまで、連続する各アニメーションの間に遅延を入れる方法を見てきました。 +しかし、並行して実行されるアニメーションを設定したい場合もあるでしょう。 +たとえば、同じ要素の2つのCSSプロパティをアニメーションしたいが、それぞれで異なる `easing` 関数を使いたい場合があります。 +そのような場合は、アニメーションの [`group()`](api/animations/group) 関数を使用できます。 -HELPFUL: The [`group()`](api/animations/group) function is used to group animation _steps_, rather than animated elements. +HELPFUL: [`group()`](api/animations/group) 関数は、アニメーション化される要素ではなく、アニメーションの _ステップ_ をグループ化するために使います。 -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. +次の例は、`:enter` と `:leave` の両方で [`group()`](api/animations/group) を使用し、2つの異なるタイミング設定を適用します。これにより、同じ要素に2つの独立したアニメーションを並行して適用できます。 -## Sequential vs. parallel animations +## 順次アニメーションと並行アニメーション {#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. +複雑なアニメーションでは、同時に多くのことが起きえます。 +では、複数のアニメーションが1つずつ順番に実行されるアニメーションを作りたい場合はどうでしょうか？先ほどは [`group()`](api/animations/group) を使って、複数のアニメーションを同時に並行実行しました。 -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. +別の関数 `sequence()` を使うと、同じアニメーションを1つずつ順番に実行できます。 +`sequence()` の中では、アニメーションステップは `style()` または `animate()` 関数呼び出しで構成されます。 -- Use `style()` to apply the provided styling data immediately. -- Use `animate()` to apply styling data over a given time interval. +- `style()` を使って、指定したスタイルデータを即座に適用します。 +- `animate()` を使って、指定した時間間隔にわたってスタイルデータを適用します。 -## Filter animation example +## フィルターアニメーションの例 {#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`. +例のページにある別のアニメーションも見てみましょう。 +Filter/Staggerタブで、**Search Heroes** テキストボックスに `Magnet` や `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`. +HTMLテンプレートには `filterAnimation` というトリガーが含まれます。 -The `filterAnimation` in the component's decorator contains three transitions. +コンポーネントのデコレーターにある `filterAnimation` には3つのトランジションが含まれます。 -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 +- ユーザーがこのページを初めて開いたり移動してきたりしたときはアニメーションをスキップします\(フィルターアニメーションは既に存在する要素を絞り込むものであるため、DOM内に既に存在する要素に対してのみ動作します\)。 +- 検索入力の値に基づいてヒーローをフィルタリングします。 -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. +- DOMから離脱する要素は、不透明度と幅を0に設定して非表示にします。 +- DOMに入ってくる要素を300ミリ秒かけてアニメーションします。 + アニメーション中は、要素が既定の幅と不透明度になります。 -- 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 +- DOMに入ってくる要素／離脱する要素が複数ある場合は、ページ上部から順に、各要素の間に50ミリ秒の遅延を入れてアニメーションをずらします。 -## Animating the items of a reordering list +## 並び替えられるリストの項目をアニメーション化する {#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. +Angularは既定で `*ngFor` のリスト項目を正しくアニメーション化しますが、並び順が変わると正しくアニメーションできなくなります。 +これは、どの要素がどれなのかを追跡できなくなり、アニメーションが壊れてしまうためです。 +こうした要素をAngularが追跡できるようにする唯一の方法は、`NgForOf` ディレクティブに `TrackByFunction` を割り当てることです。 +これにより、Angularは常にどの要素がどれなのかを把握できるため、常に正しい要素に正しいアニメーションを適用できます。 -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`. +IMPORTANT: 実行時に並び順が変わる可能性のある `*ngFor` リストの項目をアニメーション化する必要がある場合は、常に `TrackByFunction` を使用してください。 -## Animations and Component View Encapsulation +## アニメーションとコンポーネントのビューカプセル化 {#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). +AngularのアニメーションはコンポーネントのDOM構造に基づいており、直接 [ビューカプセル化](guide/components/styling#style-scoping) を考慮しません。つまり、`ViewEncapsulation.Emulated` を使用するコンポーネントは、`ViewEncapsulation.None` を使用している場合とまったく同じように振る舞います（`ViewEncapsulation.ShadowDom` と `ViewEncapsulation.ExperimentalIsolatedShadowDom` は、後述するように異なる挙動になります）。 -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. +たとえば、（このガイドの残りでも登場する）`query()` 関数を、エミュレートされたビューカプセル化を使用しているコンポーネントツリーの最上部に適用すると、そのクエリはツリーのどの深さにあるDOM要素も特定でき（その結果アニメーション化でき）ます。 -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. +一方、`ViewEncapsulation.ShadowDom` と `ViewEncapsulation.ExperimentalIsolatedShadowDom` は、DOM要素を [`ShadowRoot`](https://developer.mozilla.org/docs/Web/API/ShadowRoot) 要素の内側に「隠す」ことでコンポーネントのDOM構造を変更します。こうしたDOM操作は、アニメーションの実装が単純なDOM構造に依存し、`ShadowRoot` 要素を考慮しないため、一部のアニメーションが正しく動作しない原因になります。そのため、ShadowDomのビューカプセル化を使用するコンポーネントを含むビューにアニメーションを適用することは避けることを推奨します。 -## Animation sequence summary +## アニメーションシーケンスのまとめ {#animation-sequence-summary} -Angular functions for animating multiple elements start with `query()` to find inner elements; for example, gathering all images within a `
`. -The remaining functions, `stagger()`, [`group()`](api/animations/group), and `sequence()`, apply cascades or let you control how multiple animation steps are applied. +複数要素をアニメーション化するAngularの関数は、まず `query()` で内側の要素を見つけることから始まります。たとえば、`
` 内のすべての画像を収集する場合です。 +残りの関数である `stagger()`、[`group()`](api/animations/group)、`sequence()` では、カスケード（段階的な遅延）を適用したり、複数のアニメーションステップをどのように適用するかを制御したりできます。 -## More on Angular animations +## Angularアニメーションについてさらに詳しく {#more-on-angular-animations} -You might also be interested in the following: +以下の項目にも興味があるかもしれません： - - - - - + + + + +