From a2ba7527fbe05ed03ce1480c7501a8ad43df1db8 Mon Sep 17 00:00:00 2001 From: InoueHirosi Date: Mon, 9 Mar 2026 01:34:07 +0900 Subject: [PATCH 1/4] docs: translate guide/animations/migration.md --- .../content/guide/animations/migration.en.md | 280 ++++++++++++++++++ .../src/content/guide/animations/migration.md | 174 +++++------ 2 files changed, 367 insertions(+), 87 deletions(-) create mode 100644 adev-ja/src/content/guide/animations/migration.en.md diff --git a/adev-ja/src/content/guide/animations/migration.en.md b/adev-ja/src/content/guide/animations/migration.en.md new file mode 100644 index 000000000..e3a3e8dff --- /dev/null +++ b/adev-ja/src/content/guide/animations/migration.en.md @@ -0,0 +1,280 @@ +# Migrating away from Angular's Animations package + +The `@angular/animations` package is deprecated as of v20.2, which also introduced the new `animate.enter` and `animate.leave` feature to add animations to your application. Using these new features, you can replace all animations based on `@angular/animations` with plain CSS or JS animation libraries. Removing `@angular/animations` from your application can significantly reduce the size of your JavaScript bundle. Native CSS animations generally offer superior performance, as they can benefit from hardware acceleration. This guide walks through the process of refactoring your code from `@angular/animations` to native CSS animations. + +## How to write animations in native CSS + +If you've never written any native CSS animations, there are a number of excellent guides to get you started. Here's a few of them: +[MDN's CSS Animations guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) +[W3Schools CSS3 Animations guide](https://www.w3schools.com/css/css3_animations.asp) +[The Complete CSS Animations Tutorial](https://www.lambdatest.com/blog/css-animations-tutorial/) +[CSS Animation for Beginners](https://thoughtbot.com/blog/css-animation-for-beginners) + +and a couple of videos: +[Learn CSS Animation in 9 Minutes](https://www.youtube.com/watch?v=z2LQYsZhsFw) +[Net Ninja CSS Animation Tutorial Playlist](https://www.youtube.com/watch?v=jgw82b5Y2MU&list=PL4cUxeGkcC9iGYgmEd2dm3zAKzyCGDtM5) + +Check some of these various guides and tutorials out, and then come back to this guide. + +## Creating Reusable Animations + +Just like with the animations package, you can create reusable animations that can be shared across your application. The animations package version of this had you using the `animation()` function in a shared typescript file. The native CSS version of this is similar, but lives in a shared CSS file. + +#### With Animations Package + + + +#### With Native CSS + + + +Adding the class `animated-class` to an element would trigger the animation on that element. + +## Animating a Transition + +### Animating State and Styles + +The animations package allowed you to define various states using the [`state()`](api/animations/state) function within a component. Examples might be an `open` or `closed` state containing the styles for each respective state within the definition. For example: + +#### With Animations Package + + + +This same behavior can be accomplished natively by using CSS classes either using a keyframe animation or transition styling. + +#### With Native CSS + + + +Triggering the `open` or `closed` state is done by toggling classes on the element in your component. You can find examples of how to do this in our [template guide](guide/templates/binding#css-class-and-style-property-bindings). + +You can see similar examples in the template guide for [animating styles directly](guide/templates/binding#css-style-properties). + +### Transitions, Timing, and Easing + +The animations package `animate()` function allows for providing timing, like duration, delays and easing. This can be done natively with CSS using several css properties or shorthand properties. + +Specify `animation-duration`, `animation-delay`, and `animation-timing-function` for a keyframe animation in CSS, or alternatively use the `animation` shorthand property. + + + +Similarly, you can use `transition-duration`, `transition-delay`, and `transition-timing-function` and the `transition` shorthand for animations that are not using `@keyframes`. + + + +### Triggering an Animation + +The animations package required specifying triggers using the `trigger()` function and nesting all of your states within it. With native CSS, this is unnecessary. Animations can be triggered by toggling CSS styles or classes. Once a class is present on an element, the animation will occur. Removing the class will revert the element back to whatever CSS is defined for that element. This results in significantly less code to do the same animation. Here's an example: + +#### With Animations Package + + + + + + + +#### With Native CSS + + + + + + + +## Transition and Triggers + +### Predefined State and wildcard matching + +The animations package offers the ability to match your defined states to a transition via strings. For example, animating from open to closed would be `open => closed`. You can use wildcards to match any state to a target state, like `* => closed` and the `void` keyword can be used for entering and exiting states. For example: `* => void` for when an element leaves a view or `void => *` for when the element enters a view. + +These state matching patterns are not needed at all when animating with CSS directly. You can manage what transitions and `@keyframes` animations apply based on whatever classes you set and / or styles you set on the elements. You can also add `@starting-style` to control how the element looks upon immediately entering the DOM. + +### Automatic Property Calculation with Wildcards + +The animations package offers the ability to animate things that have been historically difficult to animate, like animating a set height to `height: auto`. You can now do this with pure CSS as well. + +#### With Animations Package + + + + + + + +You can use css-grid to animate to auto height. + +#### With Native CSS + + + + + + + +If you don't have to worry about supporting all browsers, you can also check out `calc-size()`, which is the true solution to animating auto height. See [MDN's docs](https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size) and (this tutorial)[https://frontendmasters.com/blog/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto/] for more information. + +### Animate entering and leaving a view + +The animations package offered the previously mentioned pattern matching for entering and leaving but also included the shorthand aliases of `:enter` and `:leave`. + +#### With Animations Package + + + + + + + +#### With Native CSS + + + + + + + +#### With Native CSS + + + + + + + +For more information on `animate.enter` and `animate.leave`, see the [Enter and Leave animations guide](guide/animations). + +### Animating increment and decrement + +Along with the aforementioned `:enter` and `:leave`, there's also `:increment` and `:decrement`. You can animate these also by adding and removing classes. Unlike the animation package built-in aliases, there is no automatic application of classes when the values go up or down. You can apply the appropriate classes programmatically. Here's an example: + +#### With Animations Package + + + + + + + +#### With Native CSS + + + + + + + +### Parent / Child Animations + +Unlike the animations package, when multiple animations are specified within a given component, no animation has priority over another and nothing blocks any animation from firing. Any sequencing of animations would have to be handled by your definition of your CSS animation, using animation / transition delay, and / or using `animationend` or `transitionend` to handle adding the next css to be animated. + +### Disabling an animation or all animations + +With native CSS animations, if you'd like to disable the animations that you've specified, you have multiple options. + +1. Create a custom class that forces animation and transition to `none`. + +```css +.no-animation { + animation: none !important; + transition: none !important; +} +``` + +Applying this class to an element prevents any animation from firing on that element. You could alternatively scope this to your entire DOM or section of your DOM to enforce this behavior. However, this prevents animation events from firing. If you are awaiting animation events for element removal, this solution won't work. A workaround is to set durations to 1 millisecond instead. + +2. Use the [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) media query to ensure no animations play for users that prefer less animation. + +3. Prevent adding animation classes programatically + +### Animation Callbacks + +The animations package exposed callbacks for you to use in the case that you want to do something when the animation has finished. Native CSS animations also have these callbacks. + +[`OnAnimationStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationstart_event) +[`OnAnimationEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event) +[`OnAnimationIteration`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationitration_event) +[`OnAnimationCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationcancel_event) + +[`OnTransitionStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionstart_event) +[`OnTransitionRun`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionrun_event) +[`OnTransitionEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event) +[`OnTransitionCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitioncancel_event) + +The Web Animations API has a lot of additional functionality. [Take a look at the documentation](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) to see all the available animation APIs. + +NOTE: Be aware of bubbling issues with these callbacks. If you are animating children and parents, the events bubble up from children to parents. Consider stopping propagation or looking at more details within the event to determine if you're responding to the desired event target rather than an event bubbling up from a child node. You can examine the `animationname` property or the properties being transitioned to verify you have the right nodes. + +## Complex Sequences + +The animations package has built-in functionality for creating complex sequences. These sequences are all entirely possible without the animations package. + +### Targeting specific elements + +In the animations package, you could target specific elements by using the `query()` function to find specific elements by a CSS class name, similar to [`document.querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector). This is unnecessary in a native CSS animation world. Instead, you can use your CSS selectors to target sub-classes and apply any desired `transform` or `animation`. + +To toggle classes for child nodes within a template, you can use class and style bindings to add the animations at the right points. + +### Stagger() + +The `stagger()` function allowed you to delay the animation of each item in a list of items by a specified time to create a cascade effect. You can replicate this behavior in native CSS by utilizing `animation-delay` or `transition-delay`. Here is an example of what that CSS might look like. + +#### With Animations Package + + + + + + + +#### With Native CSS + + + + + + + +### Parallel Animations + +The animations package has a `group()` function to play multiple animations at the same time. In CSS, you have full control over animation timing. If you have multiple animations defined, you can apply all of them at once. + +```css +.target-element { + animation: + rotate 3s, + fade-in 2s; +} +``` + +In this example, the `rotate` and `fade-in` animations fire at the same time. + +### Animating the items of a reordering list + +Items reordering in a list works out of the box using the previously described techniques. No additional special work is required. Items in a `@for` loop will be removed and re-added properly, which will fire off animations using `@starting-styles` for entry animations. Alternatively, you can use `animate.enter` for this same behavior. Use `animate.leave` to animate elements as they are removed, as seen in the example above. + +#### With Animations Package + + + + + + + +#### With Native CSS + + + + + + + +## Migrating usages of AnimationPlayer + +The `AnimationPlayer` class allows access to an animation to do more advanced things like pause, play, restart, and finish an animation through code. All of these things can be handled natively as well. + +You can retrieve animations off an element directly using [`Element.getAnimations()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAnimations). This returns an array of every [`Animation`](https://developer.mozilla.org/en-US/docs/Web/API/Animation) on that element. You can use the `Animation` API to do much more than you could with what the `AnimationPlayer` from the animations package offered. From here you can `cancel()`, `play()`, `pause()`, `reverse()` and much more. This native API should provide everything you need to control your animations. + +## Route Transitions + +You can use view transitions to animate between routes. See the [Route Transition Animations Guide](guide/routing/route-transition-animations) to get started. diff --git a/adev-ja/src/content/guide/animations/migration.md b/adev-ja/src/content/guide/animations/migration.md index e3a3e8dff..73cfc0bae 100644 --- a/adev-ja/src/content/guide/animations/migration.md +++ b/adev-ja/src/content/guide/animations/migration.md @@ -1,72 +1,72 @@ -# Migrating away from Angular's Animations package +# AngularのAnimationsパッケージから移行する -The `@angular/animations` package is deprecated as of v20.2, which also introduced the new `animate.enter` and `animate.leave` feature to add animations to your application. Using these new features, you can replace all animations based on `@angular/animations` with plain CSS or JS animation libraries. Removing `@angular/animations` from your application can significantly reduce the size of your JavaScript bundle. Native CSS animations generally offer superior performance, as they can benefit from hardware acceleration. This guide walks through the process of refactoring your code from `@angular/animations` to native CSS animations. +v20.2以降、`@angular/animations`パッケージは非推奨になり、同時にアプリケーションへアニメーションを追加するための新しい`animate.enter`および`animate.leave`機能が導入されました。これらの新機能を使うと、`@angular/animations`ベースのアニメーションをすべて、プレーンなCSSまたはJSアニメーションライブラリで置き換えられます。アプリケーションから`@angular/animations`を削除すると、JavaScriptバンドルのサイズを大幅に削減できます。ネイティブCSSアニメーションは、ハードウェアアクセラレーションの恩恵を受けられるため、一般により優れたパフォーマンスを発揮します。このガイドでは、`@angular/animations`からネイティブCSSアニメーションへコードをリファクタリングする手順を説明します。 -## How to write animations in native CSS +## ネイティブCSSでアニメーションを書く方法 {#how-to-write-animations-in-native-css} -If you've never written any native CSS animations, there are a number of excellent guides to get you started. Here's a few of them: -[MDN's CSS Animations guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) -[W3Schools CSS3 Animations guide](https://www.w3schools.com/css/css3_animations.asp) -[The Complete CSS Animations Tutorial](https://www.lambdatest.com/blog/css-animations-tutorial/) -[CSS Animation for Beginners](https://thoughtbot.com/blog/css-animation-for-beginners) +ネイティブCSSでアニメーションを書いたことがない場合は、入門に役立つ優れたガイドがいくつもあります。以下にいくつか紹介します。 +[MDNのCSSアニメーションガイド](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) +[W3SchoolsのCSS3アニメーションガイド](https://www.w3schools.com/css/css3_animations.asp) +[CSSアニメーションの完全チュートリアル](https://www.lambdatest.com/blog/css-animations-tutorial/) +[初心者向けCSSアニメーション](https://thoughtbot.com/blog/css-animation-for-beginners) -and a couple of videos: -[Learn CSS Animation in 9 Minutes](https://www.youtube.com/watch?v=z2LQYsZhsFw) -[Net Ninja CSS Animation Tutorial Playlist](https://www.youtube.com/watch?v=jgw82b5Y2MU&list=PL4cUxeGkcC9iGYgmEd2dm3zAKzyCGDtM5) +また、次の動画も参考にしてください。 +[9分でCSSアニメーションを学ぶ](https://www.youtube.com/watch?v=z2LQYsZhsFw) +[Net NinjaのCSSアニメーションチュートリアル再生リスト](https://www.youtube.com/watch?v=jgw82b5Y2MU&list=PL4cUxeGkcC9iGYgmEd2dm3zAKzyCGDtM5) -Check some of these various guides and tutorials out, and then come back to this guide. +まずは、これらのガイドやチュートリアルに目を通し、その後にこのガイドへ戻ってきてください。 -## Creating Reusable Animations +## 再利用可能なアニメーションを作成する {#creating-reusable-animations} -Just like with the animations package, you can create reusable animations that can be shared across your application. The animations package version of this had you using the `animation()` function in a shared typescript file. The native CSS version of this is similar, but lives in a shared CSS file. +アニメーションパッケージと同様に、アプリケーション全体で共有できる再利用可能なアニメーションを作成できます。アニメーションパッケージでは共有のTypeScriptファイルで`animation()`関数を使っていましたが、ネイティブCSSでも考え方は似ており、共有のCSSファイルに定義します。 -#### With Animations Package +#### Animationsパッケージの場合 -#### With Native CSS +#### ネイティブCSSの場合 -Adding the class `animated-class` to an element would trigger the animation on that element. +要素に`animated-class`クラスを追加すると、その要素でアニメーションがトリガーされます。 -## Animating a Transition +## トランジションをアニメーション化する {#animating-a-transition} -### Animating State and Styles +### 状態とスタイルをアニメーション化する {#animating-state-and-styles} -The animations package allowed you to define various states using the [`state()`](api/animations/state) function within a component. Examples might be an `open` or `closed` state containing the styles for each respective state within the definition. For example: +アニメーションパッケージでは、コンポーネント内で[`state()`](api/animations/state)関数を使ってさまざまな状態を定義できました。たとえば、定義の中にそれぞれの状態に対応するスタイルを含む`open`や`closed`といった状態です。例を示します。 -#### With Animations Package +#### Animationsパッケージの場合 -This same behavior can be accomplished natively by using CSS classes either using a keyframe animation or transition styling. +この動作は、キーフレームアニメーションまたはトランジションスタイルとCSSクラスを使うことで、ネイティブにも実現できます。 -#### With Native CSS +#### ネイティブCSSの場合 -Triggering the `open` or `closed` state is done by toggling classes on the element in your component. You can find examples of how to do this in our [template guide](guide/templates/binding#css-class-and-style-property-bindings). +`open`または`closed`状態のトリガーは、コンポーネント内で要素のクラスを切り替えて行います。例は、[テンプレートガイド](guide/templates/binding#css-class-and-style-property-bindings)で確認できます。 -You can see similar examples in the template guide for [animating styles directly](guide/templates/binding#css-style-properties). +同様の例として、テンプレートガイドの[スタイルを直接アニメーション化する](guide/templates/binding#css-style-properties)も参照してください。 -### Transitions, Timing, and Easing +### トランジション、タイミング、イージング {#transitions-timing-and-easing} -The animations package `animate()` function allows for providing timing, like duration, delays and easing. This can be done natively with CSS using several css properties or shorthand properties. +アニメーションパッケージの`animate()`関数では、継続時間や遅延、イージングといったタイミングを指定できました。これはネイティブでも、複数のCSSプロパティまたはショートハンドプロパティを使って実現できます。 -Specify `animation-duration`, `animation-delay`, and `animation-timing-function` for a keyframe animation in CSS, or alternatively use the `animation` shorthand property. +キーフレームアニメーションでは、`animation-duration`、`animation-delay`、`animation-timing-function`を指定するか、代わりに`animation`ショートハンドプロパティを使用します。 -Similarly, you can use `transition-duration`, `transition-delay`, and `transition-timing-function` and the `transition` shorthand for animations that are not using `@keyframes`. +同様に、`@keyframes`を使用しないアニメーションでは、`transition-duration`、`transition-delay`、`transition-timing-function`、および`transition`ショートハンドを使用できます。 -### Triggering an Animation +### アニメーションをトリガーする {#triggering-an-animation} -The animations package required specifying triggers using the `trigger()` function and nesting all of your states within it. With native CSS, this is unnecessary. Animations can be triggered by toggling CSS styles or classes. Once a class is present on an element, the animation will occur. Removing the class will revert the element back to whatever CSS is defined for that element. This results in significantly less code to do the same animation. Here's an example: +アニメーションパッケージでは、`trigger()`関数を使ってトリガーを指定し、その中にすべての状態をネストする必要がありました。ネイティブCSSでは、これは不要です。CSSのスタイルやクラスを切り替えるだけでアニメーションをトリガーできます。要素にクラスが存在するとアニメーションが実行され、クラスを削除すると、その要素に定義されているCSSへ戻ります。これにより、同じアニメーションをはるかに少ないコードで実現できます。例を示します。 -#### With Animations Package +#### Animationsパッケージの場合 @@ -74,7 +74,7 @@ The animations package required specifying triggers using the `trigger()` functi -#### With Native CSS +#### ネイティブCSSの場合 @@ -82,19 +82,19 @@ The animations package required specifying triggers using the `trigger()` functi -## Transition and Triggers +## トランジションとトリガー {#transition-and-triggers} -### Predefined State and wildcard matching +### 事前定義された状態とワイルドカードマッチング {#predefined-state-and-wildcard-matching} -The animations package offers the ability to match your defined states to a transition via strings. For example, animating from open to closed would be `open => closed`. You can use wildcards to match any state to a target state, like `* => closed` and the `void` keyword can be used for entering and exiting states. For example: `* => void` for when an element leaves a view or `void => *` for when the element enters a view. +アニメーションパッケージでは、文字列を使って定義済みの状態をトランジションに対応付けられます。たとえば、openからclosedへのアニメーションは`open => closed`となります。ワイルドカードを使うと任意の状態から対象状態へのマッチングができ、`* => closed`のように書けます。また、`void`キーワードはenterおよびexitの状態に使えます。たとえば、要素がビューを離れるときは`* => void`、要素がビューに入るときは`void => *`です。 -These state matching patterns are not needed at all when animating with CSS directly. You can manage what transitions and `@keyframes` animations apply based on whatever classes you set and / or styles you set on the elements. You can also add `@starting-style` to control how the element looks upon immediately entering the DOM. +CSSで直接アニメーション化する場合、こうした状態マッチングパターンはまったく不要です。要素に設定するクラスやスタイルに応じて、どのトランジションや`@keyframes`アニメーションを適用するかを管理できます。DOMに入った直後の要素の見た目を制御するために`@starting-style`を追加できます。 -### Automatic Property Calculation with Wildcards +### ワイルドカードによる自動プロパティ計算 {#automatic-property-calculation-with-wildcards} -The animations package offers the ability to animate things that have been historically difficult to animate, like animating a set height to `height: auto`. You can now do this with pure CSS as well. +アニメーションパッケージでは、固定した高さから`height: auto`へのアニメーションのように、従来は難しかったアニメーションを実現できました。これは現在では純粋なCSSでも可能です。 -#### With Animations Package +#### Animationsパッケージの場合 @@ -102,9 +102,9 @@ The animations package offers the ability to animate things that have been histo -You can use css-grid to animate to auto height. +CSS Gridを使うと、height: autoへのアニメーションを実現できます。 -#### With Native CSS +#### ネイティブCSSの場合 @@ -112,13 +112,13 @@ You can use css-grid to animate to auto height. -If you don't have to worry about supporting all browsers, you can also check out `calc-size()`, which is the true solution to animating auto height. See [MDN's docs](https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size) and (this tutorial)[https://frontendmasters.com/blog/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto/] for more information. +すべてのブラウザをサポートする必要がない場合は、height: autoをアニメーション化するための本命の解決策である`calc-size()`も確認してください。詳しくは、[MDNのドキュメント](https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size)と[このチュートリアル](https://frontendmasters.com/blog/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto/)を参照してください。 -### Animate entering and leaving a view +### ビューへの出入りをアニメーション化する {#animate-entering-and-leaving-a-view} -The animations package offered the previously mentioned pattern matching for entering and leaving but also included the shorthand aliases of `:enter` and `:leave`. +アニメーションパッケージでは、前述のenterとleaveのパターンマッチングに加えて、`:enter`と`:leave`というショートハンドエイリアスも提供していました。 -#### With Animations Package +#### Animationsパッケージの場合 @@ -126,7 +126,7 @@ The animations package offered the previously mentioned pattern matching for ent -#### With Native CSS +#### ネイティブCSSの場合 @@ -134,7 +134,7 @@ The animations package offered the previously mentioned pattern matching for ent -#### With Native CSS +#### ネイティブCSSの場合 @@ -142,13 +142,13 @@ The animations package offered the previously mentioned pattern matching for ent -For more information on `animate.enter` and `animate.leave`, see the [Enter and Leave animations guide](guide/animations). +`animate.enter`と`animate.leave`について詳しくは、[EnterとLeaveのアニメーションガイド](guide/animations)を参照してください。 -### Animating increment and decrement +### インクリメントとデクリメントをアニメーション化する {#animating-increment-and-decrement} -Along with the aforementioned `:enter` and `:leave`, there's also `:increment` and `:decrement`. You can animate these also by adding and removing classes. Unlike the animation package built-in aliases, there is no automatic application of classes when the values go up or down. You can apply the appropriate classes programmatically. Here's an example: +前述の`:enter`と`:leave`に加えて、`:increment`と`:decrement`もあります。これらもクラスを追加・削除することでアニメーションできます。アニメーションパッケージの組み込みエイリアスとは異なり、値が増減したときにクラスが自動で適用されるわけではありません。適切なクラスをプログラムから付与できます。例を示します。 -#### With Animations Package +#### Animationsパッケージの場合 @@ -156,7 +156,7 @@ Along with the aforementioned `:enter` and `:leave`, there's also `:increment` a -#### With Native CSS +#### ネイティブCSSの場合 @@ -164,15 +164,15 @@ Along with the aforementioned `:enter` and `:leave`, there's also `:increment` a -### Parent / Child Animations +### 親子アニメーション {#parent-child-animations} -Unlike the animations package, when multiple animations are specified within a given component, no animation has priority over another and nothing blocks any animation from firing. Any sequencing of animations would have to be handled by your definition of your CSS animation, using animation / transition delay, and / or using `animationend` or `transitionend` to handle adding the next css to be animated. +アニメーションパッケージとは異なり、あるコンポーネント内に複数のアニメーションを指定しても、どのアニメーションも他より優先されず、どのアニメーションの発火もブロックされません。アニメーションの順序付けは、animationやtransitionの遅延を使ったCSSアニメーション定義、あるいは次にアニメーションさせるCSSを追加するための`animationend`または`transitionend`によって処理する必要があります。 -### Disabling an animation or all animations +### アニメーションまたはすべてのアニメーションを無効にする {#disabling-an-animation-or-all-animations} -With native CSS animations, if you'd like to disable the animations that you've specified, you have multiple options. +ネイティブCSSアニメーションでは、指定したアニメーションを無効にしたい場合、複数の選択肢があります。 -1. Create a custom class that forces animation and transition to `none`. +1. animationとtransitionを`none`に強制するカスタムクラスを作成します。 ```css .no-animation { @@ -181,19 +181,19 @@ With native CSS animations, if you'd like to disable the animations that you've } ``` -Applying this class to an element prevents any animation from firing on that element. You could alternatively scope this to your entire DOM or section of your DOM to enforce this behavior. However, this prevents animation events from firing. If you are awaiting animation events for element removal, this solution won't work. A workaround is to set durations to 1 millisecond instead. +このクラスを要素に適用すると、その要素ではどのアニメーションも発火しなくなります。代わりにDOM全体またはDOMの一部にスコープして、この挙動を強制できます。ただし、この方法ではアニメーションイベントが発火しなくなります。要素削除のためにアニメーションイベントを待っている場合、この方法は機能しません。回避策としては、継続時間を1ミリ秒に設定します。 -2. Use the [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) media query to ensure no animations play for users that prefer less animation. +2. [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)メディアクエリを使用して、アニメーションを控えたいユーザーにはアニメーションを再生しないようにします。 -3. Prevent adding animation classes programatically +3. プログラムからアニメーションクラスを追加しないようにします。 -### Animation Callbacks +### アニメーションのコールバック {#animation-callbacks} -The animations package exposed callbacks for you to use in the case that you want to do something when the animation has finished. Native CSS animations also have these callbacks. +アニメーションパッケージは、アニメーション終了時に何かをしたい場合に使用できるコールバックを公開していました。ネイティブCSSアニメーションにも同様のコールバックがあります。 [`OnAnimationStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationstart_event) [`OnAnimationEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event) -[`OnAnimationIteration`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationitration_event) +[`OnAnimationIteration`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationiteration_event) [`OnAnimationCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationcancel_event) [`OnTransitionStart`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionstart_event) @@ -201,25 +201,25 @@ The animations package exposed callbacks for you to use in the case that you wan [`OnTransitionEnd`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event) [`OnTransitionCancel`](https://developer.mozilla.org/en-US/docs/Web/API/Element/transitioncancel_event) -The Web Animations API has a lot of additional functionality. [Take a look at the documentation](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) to see all the available animation APIs. +Web Animations APIには、他にも多くの機能があります。利用できるすべてのアニメーションAPIについては、[ドキュメント](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)を参照してください。 -NOTE: Be aware of bubbling issues with these callbacks. If you are animating children and parents, the events bubble up from children to parents. Consider stopping propagation or looking at more details within the event to determine if you're responding to the desired event target rather than an event bubbling up from a child node. You can examine the `animationname` property or the properties being transitioned to verify you have the right nodes. +NOTE: これらのコールバックではバブリングの問題に注意してください。子要素と親要素の両方をアニメーション化している場合、イベントは子要素から親要素へバブルアップします。子ノードからバブルしてきたイベントではなく、意図したイベントターゲットに応答しているかを判断するために、伝播を停止するか、イベントの詳細を確認してください。適切なノードを対象にしているかは、`animationname`プロパティやトランジション対象のプロパティを調べることで確認できます。 -## Complex Sequences +## 複雑なシーケンス {#complex-sequences} -The animations package has built-in functionality for creating complex sequences. These sequences are all entirely possible without the animations package. +アニメーションパッケージには、複雑なシーケンスを作成するための組み込み機能がありました。これらのシーケンスはどれも、アニメーションパッケージなしで十分に実現できます。 -### Targeting specific elements +### 特定の要素を対象にする {#targeting-specific-elements} -In the animations package, you could target specific elements by using the `query()` function to find specific elements by a CSS class name, similar to [`document.querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector). This is unnecessary in a native CSS animation world. Instead, you can use your CSS selectors to target sub-classes and apply any desired `transform` or `animation`. +アニメーションパッケージでは、[`document.querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector)に似た`query()`関数を使って、CSSクラス名で特定の要素を見つけて対象にできました。ネイティブCSSアニメーションでは、これは不要です。代わりにCSSセレクターを使ってサブクラスを対象にし、必要な`transform`や`animation`を適用できます。 -To toggle classes for child nodes within a template, you can use class and style bindings to add the animations at the right points. +テンプレート内の子ノードのクラスを切り替えるには、クラスバインディングとスタイルバインディングを使って、適切なタイミングでアニメーションを追加できます。 -### Stagger() +### stagger() {#stagger} -The `stagger()` function allowed you to delay the animation of each item in a list of items by a specified time to create a cascade effect. You can replicate this behavior in native CSS by utilizing `animation-delay` or `transition-delay`. Here is an example of what that CSS might look like. +`stagger()`関数では、指定した時間だけリスト内の各項目のアニメーションを遅らせて、カスケード効果を作成できました。この挙動は、ネイティブCSSでも`animation-delay`または`transition-delay`を利用して再現できます。以下はそのCSSの例です。 -#### With Animations Package +#### Animationsパッケージの場合 @@ -227,7 +227,7 @@ The `stagger()` function allowed you to delay the animation of each item in a li -#### With Native CSS +#### ネイティブCSSの場合 @@ -235,9 +235,9 @@ The `stagger()` function allowed you to delay the animation of each item in a li -### Parallel Animations +### 並行アニメーション {#parallel-animations} -The animations package has a `group()` function to play multiple animations at the same time. In CSS, you have full control over animation timing. If you have multiple animations defined, you can apply all of them at once. +アニメーションパッケージには、複数のアニメーションを同時に再生する`group()`関数がありました。CSSでは、アニメーションのタイミングを完全に制御できます。複数のアニメーションを定義している場合は、それらを一度にすべて適用できます。 ```css .target-element { @@ -247,13 +247,13 @@ The animations package has a `group()` function to play multiple animations at t } ``` -In this example, the `rotate` and `fade-in` animations fire at the same time. +この例では、`rotate`と`fade-in`のアニメーションが同時に発火します。 -### Animating the items of a reordering list +### 並び替えられるリストの項目をアニメーション化する {#animating-the-items-of-a-reordering-list} -Items reordering in a list works out of the box using the previously described techniques. No additional special work is required. Items in a `@for` loop will be removed and re-added properly, which will fire off animations using `@starting-styles` for entry animations. Alternatively, you can use `animate.enter` for this same behavior. Use `animate.leave` to animate elements as they are removed, as seen in the example above. +リスト項目の並び替えは、前述の手法を使うだけでそのまま機能します。特別な追加作業は必要ありません。`@for`ループ内の項目は適切に削除されて再追加されるため、enterアニメーションとして`@starting-styles`を使用したアニメーションが発火します。代わりに、同じ挙動を`animate.enter`で実現できます。上の例のように、要素が削除されるときは`animate.leave`を使ってアニメーションします。 -#### With Animations Package +#### Animationsパッケージの場合 @@ -261,7 +261,7 @@ Items reordering in a list works out of the box using the previously described t -#### With Native CSS +#### ネイティブCSSの場合 @@ -269,12 +269,12 @@ Items reordering in a list works out of the box using the previously described t -## Migrating usages of AnimationPlayer +## AnimationPlayerの使用箇所を移行する {#migrating-usages-of-animationplayer} -The `AnimationPlayer` class allows access to an animation to do more advanced things like pause, play, restart, and finish an animation through code. All of these things can be handled natively as well. +`AnimationPlayer`クラスを使うと、コードからアニメーションを一時停止、再生、再開、完了するなど、より高度な操作をするためにアニメーションへアクセスできます。これらはすべてネイティブでも処理できます。 -You can retrieve animations off an element directly using [`Element.getAnimations()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAnimations). This returns an array of every [`Animation`](https://developer.mozilla.org/en-US/docs/Web/API/Animation) on that element. You can use the `Animation` API to do much more than you could with what the `AnimationPlayer` from the animations package offered. From here you can `cancel()`, `play()`, `pause()`, `reverse()` and much more. This native API should provide everything you need to control your animations. +[`Element.getAnimations()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAnimations)を使うと、要素に関連付けられたアニメーションを直接取得できます。これは、その要素上のすべての[`Animation`](https://developer.mozilla.org/en-US/docs/Web/API/Animation)を配列として返します。`Animation` APIを使えば、アニメーションパッケージの`AnimationPlayer`が提供していたものよりも多くのことを行えます。ここから`cancel()`、`play()`、`pause()`、`reverse()`などを呼び出せます。このネイティブAPIだけで、アニメーションを制御するために必要な機能が揃うはずです。 -## Route Transitions +## ルートトランジション {#route-transitions} -You can use view transitions to animate between routes. See the [Route Transition Animations Guide](guide/routing/route-transition-animations) to get started. +ルート間をアニメーションさせるには、ビュー遷移を使用できます。始めるには、[ルートトランジションアニメーションガイド](guide/routing/route-transition-animations)を参照してください。 From 72ab7bc43ef7a341dbc2a226eda31e8f15b4a3ab Mon Sep 17 00:00:00 2001 From: InoueHirosi Date: Sun, 15 Mar 2026 13:11:36 +0900 Subject: [PATCH 2/4] Feat(docs) translate guide/animations/overview --- .../content/guide/animations/overview.en.md | 291 +++++++++++++++++ .../src/content/guide/animations/overview.md | 298 +++++++++--------- 2 files changed, 440 insertions(+), 149 deletions(-) create mode 100644 adev-ja/src/content/guide/animations/overview.en.md diff --git a/adev-ja/src/content/guide/animations/overview.en.md b/adev-ja/src/content/guide/animations/overview.en.md new file mode 100644 index 000000000..ec2ee0d7c --- /dev/null +++ b/adev-ja/src/content/guide/animations/overview.en.md @@ -0,0 +1,291 @@ +# Introduction to Angular animations + +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). 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. + +Animation provides the illusion of motion: HTML elements change styling over time. +Well-designed animations can make your application more fun and straightforward to use, but they aren't just cosmetic. +Animations can improve your application and user experience in a number of ways: + +- Without animations, web page transitions can seem abrupt and jarring +- Motion greatly enhances the user experience, so animations give users a chance to detect the application's response to their actions +- Good animations intuitively call the user's attention to where it is needed + +Typically, animations involve multiple style _transformations_ over time. +An HTML element can move, change color, grow or shrink, fade, or slide off the page. +These changes can occur simultaneously or sequentially. You can control the timing of each transformation. + +Angular's animation system is built on CSS functionality, which means you can animate any property that the browser considers animatable. +This includes positions, sizes, transforms, colors, borders, and more. +The W3C maintains a list of animatable properties on its [CSS Transitions](https://www.w3.org/TR/css-transitions-1) page. + +## About this guide + +This guide covers the basic Angular animation features to get you started on adding Angular animations to your project. + +## Getting started + +The main Angular modules for animations are `@angular/animations` and `@angular/platform-browser`. + +To get started with adding Angular animations to your project, import the animation-specific modules along with standard Angular functionality. + + + +Import `provideAnimationsAsync` from `@angular/platform-browser/animations/async` and add it to the providers list in the `bootstrapApplication` function call. + +```ts {header: "Enabling Animations", linenums} +bootstrapApplication(AppComponent, { + providers: [provideAnimationsAsync()], +}); +``` + + + If you need to have an animation happen immediately when your application is loaded, + you will want to switch to the eagerly loaded animations module. Import `provideAnimations` + from `@angular/platform-browser/animations` instead, and use `provideAnimations` **in place of** + `provideAnimationsAsync` in the `bootstrapApplication` function call. + + +For `NgModule` based applications import `BrowserAnimationsModule`, which introduces the animation capabilities into your Angular root application module. + + + + +If you plan to use specific animation functions in component files, import those functions from `@angular/animations`. + + + +See all [available animation functions](guide/legacy-animations#animations-api-summary) at the end of this guide. + + + +In the component file, add a metadata property called `animations:` within the `@Component()` decorator. +You put the trigger that defines an animation within the `animations` metadata property. + + + + + +## Animating a transition + +Let's animate a transition that changes a single HTML element from one state to another. +For example, you can specify that a button displays either **Open** or **Closed** based on the user's last action. +When the button is in the `open` state, it's visible and yellow. +When it's the `closed` state, it's translucent and blue. + +In HTML, these attributes are set using ordinary CSS styles such as color and opacity. +In Angular, use the `style()` function to specify a set of CSS styles for use with animations. +Collect a set of styles in an animation state, and give the state a name, such as `open` or `closed`. + +HELPFUL: Let's create a new `open-close` component to animate with simple transitions. + +Run the following command in terminal to generate the component: + +```shell +ng g component open-close +``` + +This will create the component at `src/app/open-close.ts`. + +### Animation state and styles + +Use Angular's [`state()`](api/animations/state) function to define different states to call at the end of each transition. +This function takes two arguments: +A unique name like `open` or `closed` and a `style()` function. + +Use the `style()` function to define a set of styles to associate with a given state name. +You must use _camelCase_ for style attributes that contain dashes, such as `backgroundColor` or wrap them in quotes, such as `'background-color'`. + +Let's see how Angular's [`state()`](api/animations/state) function works with the `style⁣­(⁠)` function to set CSS style attributes. +In this code snippet, multiple style attributes are set at the same time for the state. +In the `open` state, the button has a height of 200 pixels, an opacity of 1, and a yellow background color. + + + +In the following `closed` state, the button has a height of 100 pixels, an opacity of 0.8, and a background color of blue. + + + +### Transitions and timing + +In Angular, you can set multiple styles without any animation. +However, without further refinement, the button instantly transforms with no fade, no shrinkage, or other visible indicator that a change is occurring. + +To make the change less abrupt, you need to define an animation _transition_ to specify the changes that occur between one state and another over a period of time. +The `transition()` function accepts two arguments: +The first argument accepts an expression that defines the direction between two transition states, and the second argument accepts one or a series of `animate()` steps. + +Use the `animate()` function to define the length, delay, and easing of a transition, and to designate the style function for defining styles while transitions are taking place. +Use the `animate()` function to define the `keyframes()` function for multi-step animations. +These definitions are placed in the second argument of the `animate()` function. + +#### Animation metadata: duration, delay, and easing + +The `animate()` function \(second argument of the transition function\) accepts the `timings` and `styles` input parameters. + +The `timings` parameter takes either a number or a string defined in three parts. + +```ts +animate(duration); +``` + +or + +```ts +animate('duration delay easing'); +``` + +The first part, `duration`, is required. +The duration can be expressed in milliseconds as a number without quotes, or in seconds with quotes and a time specifier. +For example, a duration of a tenth of a second can be expressed as follows: + +- As a plain number, in milliseconds: + `100` + +- In a string, as milliseconds: + `'100ms'` + +- In a string, as seconds: + `'0.1s'` + +The second argument, `delay`, has the same syntax as `duration`. +For example: + +- Wait for 100ms and then run for 200ms: `'0.2s 100ms'` + +The third argument, `easing`, controls how the animation [accelerates and decelerates](https://easings.net) during its runtime. +For example, `ease-in` causes the animation to begin slowly, and to pick up speed as it progresses. + +- Wait for 100ms, run for 200ms. + Use a deceleration curve to start out fast and slowly decelerate to a resting point: + `'0.2s 100ms ease-out'` + +- Run for 200ms, with no delay. + Use a standard curve to start slow, accelerate in the middle, and then decelerate slowly at the end: + `'0.2s ease-in-out'` + +- Start immediately, run for 200ms. + Use an acceleration curve to start slow and end at full velocity: + `'0.2s ease-in'` + +HELPFUL: See the Material Design website's topic on [Natural easing curves](https://material.io/design/motion/speed.html#easing) for general information on easing curves. + +This example provides a state transition from `open` to `closed` with a 1-second transition between states. + + + +In the preceding code snippet, the `=>` operator indicates unidirectional transitions, and `<=>` is bidirectional. +Within the transition, `animate()` specifies how long the transition takes. +In this case, the state change from `open` to `closed` takes 1 second, expressed here as `1s`. + +This example adds a state transition from the `closed` state to the `open` state with a 0.5-second transition animation arc. + + + +HELPFUL: Some additional notes on using styles within [`state`](api/animations/state) and `transition` functions. + +- Use [`state()`](api/animations/state) to define styles that are applied at the end of each transition, they persist after the animation completes +- Use `transition()` to define intermediate styles, which create the illusion of motion during the animation +- When animations are disabled, `transition()` styles can be skipped, but [`state()`](api/animations/state) styles can't +- Include multiple state pairs within the same `transition()` argument: + + ```ts + transition('on => off, off => void'); + ``` + +### Triggering the animation + +An animation requires a _trigger_, so that it knows when to start. +The `trigger()` function collects the states and transitions, and gives the animation a name, so that you can attach it to the triggering element in the HTML template. + +The `trigger()` function describes the property name to watch for changes. +When a change occurs, the trigger initiates the actions included in its definition. +These actions can be transitions or other functions, as we'll see later on. + +In this example, we'll name the trigger `openClose`, and attach it to the `button` element. +The trigger describes the open and closed states, and the timings for the two transitions. + +HELPFUL: Within each `trigger()` function call, an element can only be in one state at any given time. +However, it's possible for multiple triggers to be active at once. + +### Defining animations and attaching them to the HTML template + +Animations are defined in the metadata of the component that controls the HTML element to be animated. +Put the code that defines your animations under the `animations:` property within the `@Component()` decorator. + + + +When you've defined an animation trigger for a component, attach it to an element in that component's template by wrapping the trigger name in brackets and preceding it with an `@` symbol. +Then, you can bind the trigger to a template expression using standard Angular property binding syntax as shown below, where `triggerName` is the name of the trigger, and `expression` evaluates to a defined animation state. + +```angular-html +
…
+``` + +The animation is executed or triggered when the expression value changes to a new state. + +The following code snippet binds the trigger to the value of the `isOpen` property. + + + +In this example, when the `isOpen` expression evaluates to a defined state of `open` or `closed`, it notifies the trigger `openClose` of a state change. +Then it's up to the `openClose` code to handle the state change and kick off a state change animation. + +For elements entering or leaving a page \(inserted or removed from the DOM\), you can make the animations conditional. +For example, use `*ngIf` with the animation trigger in the HTML template. + +HELPFUL: In the component file, set the trigger that defines the animations as the value of the `animations:` property in the `@Component()` decorator. + +In the HTML template file, use the trigger name to attach the defined animations to the HTML element to be animated. + +### Code review + +Here are the code files discussed in the transition example. + + + + + + + +### Summary + +You learned to add animation to a transition between two states, using `style()` and [`state()`](api/animations/state) along with `animate()` for the timing. + +Learn about more advanced features in Angular animations under the Animation section, beginning with advanced techniques in [transition and triggers](guide/legacy-animations/transition-and-triggers). + +## Animations API summary + +The functional API provided by the `@angular/animations` module provides a domain-specific language \(DSL\) for creating and controlling animations in Angular applications. +See the [API reference](api#animations) for a complete listing and syntax details of the core functions and related data structures. + +| Function name | What it does | +| :-------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `trigger()` | Kicks off the animation and serves as a container for all other animation function calls. HTML template binds to `triggerName`. Use the first argument to declare a unique trigger name. Uses array syntax. | +| `style()` | Defines one or more CSS styles to use in animations. Controls the visual appearance of HTML elements during animations. Uses object syntax. | +| [`state()`](api/animations/state) | Creates a named set of CSS styles that should be applied on successful transition to a given state. The state can then be referenced by name within other animation functions. | +| `animate()` | Specifies the timing information for a transition. Optional values for `delay` and `easing`. Can contain `style()` calls within. | +| `transition()` | Defines the animation sequence between two named states. Uses array syntax. | +| `keyframes()` | Allows a sequential change between styles within a specified time interval. Use within `animate()`. Can include multiple `style()` calls within each `keyframe()`. Uses array syntax. | +| [`group()`](api/animations/group) | Specifies a group of animation steps \(_inner animations_\) to be run in parallel. Animation continues only after all inner animation steps have completed. Used within `sequence()` or `transition()`. | +| `query()` | Finds one or more inner HTML elements within the current element. | +| `sequence()` | Specifies a list of animation steps that are run sequentially, one by one. | +| `stagger()` | Staggers the starting time for animations for multiple elements. | +| `animation()` | Produces a reusable animation that can be invoked from elsewhere. Used together with `useAnimation()`. | +| `useAnimation()` | Activates a reusable animation. Used with `animation()`. | +| `animateChild()` | Allows animations on child components to be run within the same timeframe as the parent. | + + + +## More on Angular animations + +HELPFUL: Check out this [presentation](https://www.youtube.com/watch?v=rnTK9meY5us), shown at the AngularConnect conference in November 2017, and the accompanying [source code](https://github.com/matsko/animationsftw.in). + +You might also be interested in the following: + + + + + + + + diff --git a/adev-ja/src/content/guide/animations/overview.md b/adev-ja/src/content/guide/animations/overview.md index ec2ee0d7c..07b93d6ea 100644 --- a/adev-ja/src/content/guide/animations/overview.md +++ b/adev-ja/src/content/guide/animations/overview.md @@ -1,36 +1,36 @@ -# Introduction to Angular animations +# Angularアニメーション入門 -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). 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チームは、新しいコードのアニメーションには、ネイティブCSSと`animate.enter`および`animate.leave`を使用することを推奨しています。新しいEnter / Leaveの[アニメーションガイド](guide/animations)で詳細を確認してください。また、[AngularのAnimationsパッケージから移行する](guide/animations/migration)も参照し、アプリケーションで純粋なCSSアニメーションへの移行を開始する方法を確認してください。 -Animation provides the illusion of motion: HTML elements change styling over time. -Well-designed animations can make your application more fun and straightforward to use, but they aren't just cosmetic. -Animations can improve your application and user experience in a number of ways: +アニメーションは動いているように見せる効果を生み出します。HTML要素のスタイルは時間の経過とともに変化します。 +適切に設計されたアニメーションは、アプリケーションをより楽しく、分かりやすく使えるようにしますが、単なる装飾ではありません。 +アニメーションは、いくつかの方法でアプリケーションとユーザー体験を向上させます。 -- Without animations, web page transitions can seem abrupt and jarring -- Motion greatly enhances the user experience, so animations give users a chance to detect the application's response to their actions -- Good animations intuitively call the user's attention to where it is needed +- アニメーションがないと、ウェブページの遷移は唐突でぎこちなく感じられることがあります +- モーションはユーザー体験を大きく向上させるため、アニメーションはユーザーが自分の操作に対するアプリケーションの応答を把握する機会を与えます +- 優れたアニメーションは、必要な場所へユーザーの注意を直感的に向けます -Typically, animations involve multiple style _transformations_ over time. -An HTML element can move, change color, grow or shrink, fade, or slide off the page. -These changes can occur simultaneously or sequentially. You can control the timing of each transformation. +一般的に、アニメーションには時間の経過に沿った複数のスタイルの_変化_が含まれます。 +HTML要素は移動、色の変更、拡大や縮小、フェード、ページ外へのスライドができます。 +これらの変化は同時にも順番にも発生します。各変化のタイミングは制御できます。 -Angular's animation system is built on CSS functionality, which means you can animate any property that the browser considers animatable. -This includes positions, sizes, transforms, colors, borders, and more. -The W3C maintains a list of animatable properties on its [CSS Transitions](https://www.w3.org/TR/css-transitions-1) page. +AngularのアニメーションシステムはCSSの機能の上に構築されているため、ブラウザがアニメーション可能と見なす任意のプロパティをアニメーション化できます。 +これには、位置、サイズ、transform、色、境界線などが含まれます。 +W3Cは、アニメーション可能なプロパティの一覧を[CSS Transitions](https://www.w3.org/TR/css-transitions-1)ページで管理しています。 -## About this guide +## このガイドについて {#about-this-guide} -This guide covers the basic Angular animation features to get you started on adding Angular animations to your project. +このガイドでは、プロジェクトにAngularアニメーションを追加し始めるための基本的なAngularアニメーション機能を扱います。 -## Getting started +## はじめに {#getting-started} -The main Angular modules for animations are `@angular/animations` and `@angular/platform-browser`. +アニメーションに関する主なAngularモジュールは`@angular/animations`と`@angular/platform-browser`です。 -To get started with adding Angular animations to your project, import the animation-specific modules along with standard Angular functionality. +プロジェクトにAngularアニメーションを追加し始めるには、標準のAngular機能とあわせてアニメーション専用モジュールをインポートします。 - -Import `provideAnimationsAsync` from `@angular/platform-browser/animations/async` and add it to the providers list in the `bootstrapApplication` function call. + +`@angular/platform-browser/animations/async`から`provideAnimationsAsync`をインポートし、`bootstrapApplication`関数呼び出しのprovidersリストに追加します。 ```ts {header: "Enabling Animations", linenums} bootstrapApplication(AppComponent, { @@ -38,208 +38,208 @@ bootstrapApplication(AppComponent, { }); ``` - - If you need to have an animation happen immediately when your application is loaded, - you will want to switch to the eagerly loaded animations module. Import `provideAnimations` - from `@angular/platform-browser/animations` instead, and use `provideAnimations` **in place of** - `provideAnimationsAsync` in the `bootstrapApplication` function call. + + アプリケーションの読み込み時にすぐアニメーションを発生させたい場合は、 + eagerに読み込まれるアニメーションモジュールへ切り替える必要があります。代わりに`provideAnimations` + を`@angular/platform-browser/animations`からインポートし、`bootstrapApplication` + 関数呼び出しでは`provideAnimationsAsync`の**代わりに**`provideAnimations`を使用します。 -For `NgModule` based applications import `BrowserAnimationsModule`, which introduces the animation capabilities into your Angular root application module. +`NgModule`ベースのアプリケーションでは、`BrowserAnimationsModule`をインポートします。これは、Angularルートアプリケーションモジュールにアニメーション機能を導入します。 - -If you plan to use specific animation functions in component files, import those functions from `@angular/animations`. + +コンポーネントファイルで特定のアニメーション関数を使用する予定がある場合は、それらの関数を`@angular/animations`からインポートします。 -See all [available animation functions](guide/legacy-animations#animations-api-summary) at the end of this guide. +このガイドの末尾で、利用可能な[すべてのアニメーション関数](#animations-api-summary)を確認できます。 - -In the component file, add a metadata property called `animations:` within the `@Component()` decorator. -You put the trigger that defines an animation within the `animations` metadata property. + +コンポーネントファイルで、`@Component()`デコレーター内に`animations:`というメタデータプロパティを追加します。 +アニメーションを定義するトリガーは、`animations`メタデータプロパティ内に配置します。 -## Animating a transition +## トランジションをアニメーション化する {#animating-a-transition} -Let's animate a transition that changes a single HTML element from one state to another. -For example, you can specify that a button displays either **Open** or **Closed** based on the user's last action. -When the button is in the `open` state, it's visible and yellow. -When it's the `closed` state, it's translucent and blue. +1つのHTML要素をある状態から別の状態へ変化させるトランジションをアニメーション化してみましょう。 +たとえば、ユーザーの直前の操作に応じて、ボタンに**Open**または**Closed**のどちらかを表示するように指定できます。 +ボタンが`open`状態のときは表示され、黄色です。 +`closed`状態のときは半透明で、青色です。 -In HTML, these attributes are set using ordinary CSS styles such as color and opacity. -In Angular, use the `style()` function to specify a set of CSS styles for use with animations. -Collect a set of styles in an animation state, and give the state a name, such as `open` or `closed`. +HTMLでは、これらの属性は色や不透明度などの通常のCSSスタイルで設定します。 +Angularでは、アニメーションで使用するCSSスタイルのセットを指定するために`style()`関数を使用します。 +スタイルのセットをアニメーション状態としてまとめ、`open`や`closed`のような名前を付けます。 -HELPFUL: Let's create a new `open-close` component to animate with simple transitions. +HELPFUL: 単純なトランジションでアニメーション化する新しい`open-close`コンポーネントを作成しましょう。 -Run the following command in terminal to generate the component: +コンポーネントを生成するには、ターミナルで次のコマンドを実行します: ```shell ng g component open-close ``` -This will create the component at `src/app/open-close.ts`. +これにより、`src/app/open-close.ts`にコンポーネントが作成されます。 -### Animation state and styles +### アニメーションの状態とスタイル {#animation-state-and-styles} -Use Angular's [`state()`](api/animations/state) function to define different states to call at the end of each transition. -This function takes two arguments: -A unique name like `open` or `closed` and a `style()` function. +Angularの[`state()`](api/animations/state)関数を使用して、各トランジションの最後で呼び出す異なる状態を定義します。 +この関数は2つの引数を取ります: +`open`や`closed`のような一意の名前と、`style()`関数です。 -Use the `style()` function to define a set of styles to associate with a given state name. -You must use _camelCase_ for style attributes that contain dashes, such as `backgroundColor` or wrap them in quotes, such as `'background-color'`. +`style()`関数を使用して、指定した状態名に関連付けるスタイルのセットを定義します。 +`backgroundColor`のようにダッシュを含むスタイル属性には_camelCase_を使うか、`'background-color'`のように引用符で囲む必要があります。 -Let's see how Angular's [`state()`](api/animations/state) function works with the `style⁣­(⁠)` function to set CSS style attributes. -In this code snippet, multiple style attributes are set at the same time for the state. -In the `open` state, the button has a height of 200 pixels, an opacity of 1, and a yellow background color. +Angularの[`state()`](api/animations/state)関数が、CSSスタイル属性を設定するために`style⁣­(⁠)`関数とどのように連携するかを見てみましょう。 +このコードスニペットでは、その状態に対して複数のスタイル属性を同時に設定しています。 +`open`状態では、ボタンの高さは200ピクセル、不透明度は1、背景色は黄色です。 -In the following `closed` state, the button has a height of 100 pixels, an opacity of 0.8, and a background color of blue. +続く`closed`状態では、ボタンの高さは100ピクセル、不透明度は0.8、背景色は青です。 -### Transitions and timing +### トランジションとタイミング {#transitions-and-timing} -In Angular, you can set multiple styles without any animation. -However, without further refinement, the button instantly transforms with no fade, no shrinkage, or other visible indicator that a change is occurring. +Angularでは、アニメーションなしでも複数のスタイルを設定できます。 +ただし、さらに調整しなければ、ボタンはフェードや縮小などの変化を示さないまま瞬時に変形します。 -To make the change less abrupt, you need to define an animation _transition_ to specify the changes that occur between one state and another over a period of time. -The `transition()` function accepts two arguments: -The first argument accepts an expression that defines the direction between two transition states, and the second argument accepts one or a series of `animate()` steps. +変化をそれほど唐突にしないためには、ある状態から別の状態へ一定時間のあいだに起こる変化を指定するアニメーション_トランジション_を定義する必要があります。 +`transition()`関数は2つの引数を受け取ります: +1つ目の引数は2つのトランジション状態間の方向を定義する式、2つ目の引数は1つ以上の`animate()`ステップです。 -Use the `animate()` function to define the length, delay, and easing of a transition, and to designate the style function for defining styles while transitions are taking place. -Use the `animate()` function to define the `keyframes()` function for multi-step animations. -These definitions are placed in the second argument of the `animate()` function. +`animate()`関数を使用して、トランジションの長さ、遅延、イージングを定義し、トランジション中のスタイルを定義する関数を指定します。 +`animate()`関数を使用して、複数ステップのアニメーションのために`keyframes()`関数を定義します。 +これらの定義は、`animate()`関数の2つ目の引数に配置します。 -#### Animation metadata: duration, delay, and easing +#### アニメーションメタデータ: 継続時間、遅延、イージング {#animation-metadata-duration-delay-and-easing} -The `animate()` function \(second argument of the transition function\) accepts the `timings` and `styles` input parameters. +`animate()`関数 \(トランジション関数の2つ目の引数\) は、`timings`と`styles`の入力パラメーターを受け取ります。 -The `timings` parameter takes either a number or a string defined in three parts. +`timings`パラメーターは、数値または3つの部分で定義された文字列を取ります。 ```ts animate(duration); ``` -or +または ```ts animate('duration delay easing'); ``` -The first part, `duration`, is required. -The duration can be expressed in milliseconds as a number without quotes, or in seconds with quotes and a time specifier. -For example, a duration of a tenth of a second can be expressed as follows: +最初の部分である`duration`は必須です。 +継続時間は、引用符なしの数値でミリ秒として表すか、引用符付きで時間指定子を付けた秒として表せます。 +たとえば、10分の1秒の継続時間は次のように表せます: -- As a plain number, in milliseconds: +- 単なる数値で、ミリ秒として: `100` -- In a string, as milliseconds: +- 文字列で、ミリ秒として: `'100ms'` -- In a string, as seconds: +- 文字列で、秒として: `'0.1s'` -The second argument, `delay`, has the same syntax as `duration`. -For example: +2つ目の引数`delay`は、`duration`と同じ構文です。 +例: -- Wait for 100ms and then run for 200ms: `'0.2s 100ms'` +- 100ms待ってから200ms実行する: `'0.2s 100ms'` -The third argument, `easing`, controls how the animation [accelerates and decelerates](https://easings.net) during its runtime. -For example, `ease-in` causes the animation to begin slowly, and to pick up speed as it progresses. +3つ目の引数`easing`は、アニメーションが実行中にどのように[加速および減速するか](https://easings.net)を制御します。 +たとえば、`ease-in`はアニメーションをゆっくり開始させ、進行するにつれて速度を上げます。 -- Wait for 100ms, run for 200ms. - Use a deceleration curve to start out fast and slowly decelerate to a resting point: +- 100ms待って、200ms実行する。 + 減速カーブを使用して高速に開始し、停止点に向かってゆっくり減速します: `'0.2s 100ms ease-out'` -- Run for 200ms, with no delay. - Use a standard curve to start slow, accelerate in the middle, and then decelerate slowly at the end: +- 200ms実行し、遅延はなし。 + 標準カーブを使用してゆっくり開始し、中盤で加速し、終盤でゆっくり減速します: `'0.2s ease-in-out'` -- Start immediately, run for 200ms. - Use an acceleration curve to start slow and end at full velocity: +- すぐに開始して、200ms実行する。 + 加速カーブを使用してゆっくり開始し、最大速度で終わります: `'0.2s ease-in'` -HELPFUL: See the Material Design website's topic on [Natural easing curves](https://material.io/design/motion/speed.html#easing) for general information on easing curves. +HELPFUL: イージングカーブの一般情報については、Material Designの[Natural easing curves](https://material.io/design/motion/speed.html#easing)を参照してください。 -This example provides a state transition from `open` to `closed` with a 1-second transition between states. +この例では、`open`から`closed`への状態トランジションを、状態間で1秒かけて行います。 -In the preceding code snippet, the `=>` operator indicates unidirectional transitions, and `<=>` is bidirectional. -Within the transition, `animate()` specifies how long the transition takes. -In this case, the state change from `open` to `closed` takes 1 second, expressed here as `1s`. +上のコードスニペットでは、`=>`演算子は単方向トランジションを示し、`<=>`は双方向です。 +トランジション内では、`animate()`がトランジションにかかる時間を指定します。 +この場合、`open`から`closed`への状態変化は1秒で、ここでは`1s`と表現しています。 -This example adds a state transition from the `closed` state to the `open` state with a 0.5-second transition animation arc. +この例では、`closed`状態から`open`状態への状態トランジションを、0.5秒のトランジションアニメーションで追加しています。 -HELPFUL: Some additional notes on using styles within [`state`](api/animations/state) and `transition` functions. +HELPFUL: [`state`](api/animations/state)関数と`transition`関数内でスタイルを使用する際の追加メモです。 -- Use [`state()`](api/animations/state) to define styles that are applied at the end of each transition, they persist after the animation completes -- Use `transition()` to define intermediate styles, which create the illusion of motion during the animation -- When animations are disabled, `transition()` styles can be skipped, but [`state()`](api/animations/state) styles can't -- Include multiple state pairs within the same `transition()` argument: +- [`state()`](api/animations/state)を使用すると、各トランジションの終了時に適用されるスタイルを定義できます。これらはアニメーション完了後も保持されます +- `transition()`を使用すると、中間スタイルを定義でき、アニメーション中に動いているような錯覚を生み出します +- アニメーションが無効な場合、`transition()`のスタイルはスキップされることがありますが、[`state()`](api/animations/state)のスタイルはスキップされません +- 同じ`transition()`引数内に複数の状態ペアを含めます: ```ts transition('on => off, off => void'); ``` -### Triggering the animation +### アニメーションをトリガーする {#triggering-the-animation} -An animation requires a _trigger_, so that it knows when to start. -The `trigger()` function collects the states and transitions, and gives the animation a name, so that you can attach it to the triggering element in the HTML template. +アニメーションには、いつ開始すべきかを知るための_トリガー_が必要です。 +`trigger()`関数は状態とトランジションをまとめ、アニメーションに名前を付けることで、HTMLテンプレート内のトリガー対象要素にアタッチできるようにします。 -The `trigger()` function describes the property name to watch for changes. -When a change occurs, the trigger initiates the actions included in its definition. -These actions can be transitions or other functions, as we'll see later on. +`trigger()`関数は、変化を監視するプロパティ名を記述します。 +変化が発生すると、トリガーはその定義に含まれるアクションを開始します。 +これらのアクションは、後で見るように、トランジションやその他の関数です。 -In this example, we'll name the trigger `openClose`, and attach it to the `button` element. -The trigger describes the open and closed states, and the timings for the two transitions. +この例では、トリガーに`openClose`という名前を付け、`button`要素にアタッチします。 +トリガーは、open状態とclosed状態、および2つのトランジションのタイミングを記述します。 -HELPFUL: Within each `trigger()` function call, an element can only be in one state at any given time. -However, it's possible for multiple triggers to be active at once. +HELPFUL: 各`trigger()`関数呼び出しの中では、要素は任意の時点で1つの状態にしかなれません。 +ただし、複数のトリガーを同時にアクティブにできます。 -### Defining animations and attaching them to the HTML template +### アニメーションを定義してHTMLテンプレートにアタッチする {#defining-animations-and-attaching-them-to-the-html-template} -Animations are defined in the metadata of the component that controls the HTML element to be animated. -Put the code that defines your animations under the `animations:` property within the `@Component()` decorator. +アニメーションは、アニメーション化するHTML要素を制御するコンポーネントのメタデータで定義します。 +アニメーションを定義するコードは、`@Component()`デコレーター内の`animations:`プロパティの下に配置します。 -When you've defined an animation trigger for a component, attach it to an element in that component's template by wrapping the trigger name in brackets and preceding it with an `@` symbol. -Then, you can bind the trigger to a template expression using standard Angular property binding syntax as shown below, where `triggerName` is the name of the trigger, and `expression` evaluates to a defined animation state. +コンポーネントのアニメーショントリガーを定義したら、そのコンポーネントのテンプレート内の要素に、トリガー名を角括弧で囲み、先頭に`@`記号を付けてアタッチします。 +その後、次に示すように、標準のAngularプロパティバインディング構文を使ってトリガーをテンプレート式にバインドできます。ここで、`triggerName`はトリガー名、`expression`は定義済みのアニメーション状態に評価されます。 ```angular-html
…
``` -The animation is executed or triggered when the expression value changes to a new state. +式の値が新しい状態に変化すると、アニメーションが実行、つまりトリガーされます。 -The following code snippet binds the trigger to the value of the `isOpen` property. +次のコードスニペットでは、トリガーを`isOpen`プロパティの値にバインドしています。 -In this example, when the `isOpen` expression evaluates to a defined state of `open` or `closed`, it notifies the trigger `openClose` of a state change. -Then it's up to the `openClose` code to handle the state change and kick off a state change animation. +この例では、`isOpen`式が定義済みの`open`または`closed`状態に評価されると、トリガー`openClose`に状態変化を通知します。 +その後は、`openClose`のコードが状態変化を処理し、状態変化アニメーションを開始します。 -For elements entering or leaving a page \(inserted or removed from the DOM\), you can make the animations conditional. -For example, use `*ngIf` with the animation trigger in the HTML template. +ページに出入りする要素 \(DOMに挿入またはDOMから削除される要素\) では、アニメーションを条件付きにできます。 +たとえば、HTMLテンプレートでアニメーショントリガーと一緒に`*ngIf`を使用します。 -HELPFUL: In the component file, set the trigger that defines the animations as the value of the `animations:` property in the `@Component()` decorator. +HELPFUL: コンポーネントファイルでは、アニメーションを定義するトリガーを、`@Component()`デコレーター内の`animations:`プロパティの値として設定します。 -In the HTML template file, use the trigger name to attach the defined animations to the HTML element to be animated. +HTMLテンプレートファイルでは、トリガー名を使って、定義したアニメーションをアニメーション化するHTML要素にアタッチします。 -### Code review +### コードレビュー {#code-review} -Here are the code files discussed in the transition example. +ここでは、トランジションの例で説明したコードファイルを示します。 @@ -247,45 +247,45 @@ Here are the code files discussed in the transition example. -### Summary +### まとめ {#summary} -You learned to add animation to a transition between two states, using `style()` and [`state()`](api/animations/state) along with `animate()` for the timing. +`style()`と[`state()`](api/animations/state)、およびタイミングのための`animate()`を使用して、2つの状態間のトランジションにアニメーションを追加する方法を学びました。 -Learn about more advanced features in Angular animations under the Animation section, beginning with advanced techniques in [transition and triggers](guide/legacy-animations/transition-and-triggers). +[transition and triggers](guide/animations/transition-and-triggers)の高度なテクニックから始めて、AnimationセクションでAngularアニメーションのより高度な機能を学んでください。 -## Animations API summary +## Animations APIの概要 {#animations-api-summary} -The functional API provided by the `@angular/animations` module provides a domain-specific language \(DSL\) for creating and controlling animations in Angular applications. -See the [API reference](api#animations) for a complete listing and syntax details of the core functions and related data structures. +`@angular/animations`モジュールが提供する関数型APIは、Angularアプリケーションでアニメーションを作成および制御するためのドメイン固有言語 \(DSL\) を提供します。 +コア関数と関連データ構造の完全な一覧と構文の詳細については、[APIリファレンス](api/animations)を参照してください。 -| Function name | What it does | -| :-------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `trigger()` | Kicks off the animation and serves as a container for all other animation function calls. HTML template binds to `triggerName`. Use the first argument to declare a unique trigger name. Uses array syntax. | -| `style()` | Defines one or more CSS styles to use in animations. Controls the visual appearance of HTML elements during animations. Uses object syntax. | -| [`state()`](api/animations/state) | Creates a named set of CSS styles that should be applied on successful transition to a given state. The state can then be referenced by name within other animation functions. | -| `animate()` | Specifies the timing information for a transition. Optional values for `delay` and `easing`. Can contain `style()` calls within. | -| `transition()` | Defines the animation sequence between two named states. Uses array syntax. | -| `keyframes()` | Allows a sequential change between styles within a specified time interval. Use within `animate()`. Can include multiple `style()` calls within each `keyframe()`. Uses array syntax. | -| [`group()`](api/animations/group) | Specifies a group of animation steps \(_inner animations_\) to be run in parallel. Animation continues only after all inner animation steps have completed. Used within `sequence()` or `transition()`. | -| `query()` | Finds one or more inner HTML elements within the current element. | -| `sequence()` | Specifies a list of animation steps that are run sequentially, one by one. | -| `stagger()` | Staggers the starting time for animations for multiple elements. | -| `animation()` | Produces a reusable animation that can be invoked from elsewhere. Used together with `useAnimation()`. | -| `useAnimation()` | Activates a reusable animation. Used with `animation()`. | -| `animateChild()` | Allows animations on child components to be run within the same timeframe as the parent. | +| 関数名 | 役割 | +| :------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `trigger()` | アニメーションを開始し、他のすべてのアニメーション関数呼び出しのコンテナーとして機能します。HTMLテンプレートは`triggerName`にバインドします。最初の引数を使って一意のトリガー名を宣言します。配列構文を使用します。 | +| `style()` | アニメーションで使用する1つ以上のCSSスタイルを定義します。アニメーション中のHTML要素の見た目を制御します。オブジェクト構文を使用します。 | +| [`state()`](api/animations/state) | 指定した状態へのトランジションが成功したときに適用される、名前付きのCSSスタイルセットを作成します。この状態は、他のアニメーション関数内で名前で参照できます。 | +| `animate()` | トランジションのタイミング情報を指定します。`delay`と`easing`は省略可能です。内部に`style()`呼び出しを含められます。 | +| `transition()` | 2つの名前付き状態間のアニメーションシーケンスを定義します。配列構文を使用します。 | +| `keyframes()` | 指定した時間範囲内で順次スタイルを変化させます。`animate()`の中で使用します。各`keyframe()`の内側に複数の`style()`呼び出しを含められます。配列構文を使用します。 | +| [`group()`](api/animations/group) | 並列に実行するアニメーションステップのグループ（_内側のアニメーション_）を指定します。すべての内側のアニメーションステップが完了した後でのみ、アニメーションは続行されます。`sequence()`または`transition()`内で使用します。 | +| `query()` | 現在の要素の内側にある1つ以上のHTML要素を検索します。 | +| `sequence()` | 順番に1つずつ実行されるアニメーションステップのリストを指定します。 | +| `stagger()` | 複数要素のアニメーション開始時刻をずらします。 | +| `animation()` | 別の場所から呼び出せる再利用可能なアニメーションを生成します。`useAnimation()`と併用します。 | +| `useAnimation()` | 再利用可能なアニメーションを有効化します。`animation()`と併用します。 | +| `animateChild()` | 子コンポーネントのアニメーションを、親と同じ時間枠で実行できるようにします。 | -## More on Angular animations +## Angularアニメーションについてさらに詳しく {#more-on-angular-animations} -HELPFUL: Check out this [presentation](https://www.youtube.com/watch?v=rnTK9meY5us), shown at the AngularConnect conference in November 2017, and the accompanying [source code](https://github.com/matsko/animationsftw.in). +HELPFUL: 2017年11月のAngularConnectカンファレンスで紹介されたこの[プレゼンテーション](https://www.youtube.com/watch?v=rnTK9meY5us)と、付属する[ソースコード](https://github.com/matsko/animationsftw.in)も確認してください。 -You might also be interested in the following: +次の項目にも興味があるかもしれません: - - - - - + + + + + From bd162ebb43cdf9c555302e3ac607f1b3095f259c Mon Sep 17 00:00:00 2001 From: InoueHirosi Date: Sun, 15 Mar 2026 13:26:53 +0900 Subject: [PATCH 3/4] Fix(docs) align wording in guide/animations/overview --- .../src/content/guide/animations/overview.md | 46 +++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/adev-ja/src/content/guide/animations/overview.md b/adev-ja/src/content/guide/animations/overview.md index 07b93d6ea..837f32519 100644 --- a/adev-ja/src/content/guide/animations/overview.md +++ b/adev-ja/src/content/guide/animations/overview.md @@ -1,6 +1,6 @@ -# Angularアニメーション入門 +# Angularアニメーションの概要 -IMPORTANT: `@angular/animations`パッケージは現在非推奨です。Angularチームは、新しいコードのアニメーションには、ネイティブCSSと`animate.enter`および`animate.leave`を使用することを推奨しています。新しいEnter / Leaveの[アニメーションガイド](guide/animations)で詳細を確認してください。また、[AngularのAnimationsパッケージから移行する](guide/animations/migration)も参照し、アプリケーションで純粋なCSSアニメーションへの移行を開始する方法を確認してください。 +IMPORTANT: `@angular/animations`パッケージは現在非推奨です。Angularチームは、新しく書くコードのアニメーションには`animate.enter`と`animate.leave`を使ったネイティブCSSの利用を推奨します。詳しくは、新しいenterとleaveの[アニメーションガイド](guide/animations)を参照してください。また、アプリケーションで純粋なCSSアニメーションへの移行を始める方法については、[AngularのAnimationsパッケージからの移行](guide/animations/migration)も参照してください。 アニメーションは動いているように見せる効果を生み出します。HTML要素のスタイルは時間の経過とともに変化します。 適切に設計されたアニメーションは、アプリケーションをより楽しく、分かりやすく使えるようにしますが、単なる装飾ではありません。 @@ -20,13 +20,13 @@ W3Cは、アニメーション可能なプロパティの一覧を[CSS Transitio ## このガイドについて {#about-this-guide} -このガイドでは、プロジェクトにAngularアニメーションを追加し始めるための基本的なAngularアニメーション機能を扱います。 +このガイドでは、プロジェクトにAngularアニメーションを追加するための基本機能を紹介します。 ## はじめに {#getting-started} アニメーションに関する主なAngularモジュールは`@angular/animations`と`@angular/platform-browser`です。 -プロジェクトにAngularアニメーションを追加し始めるには、標準のAngular機能とあわせてアニメーション専用モジュールをインポートします。 +プロジェクトでAngularアニメーションを使い始めるには、標準のAngular機能とあわせてアニメーション専用モジュールをインポートします。 @@ -39,13 +39,13 @@ bootstrapApplication(AppComponent, { ``` - アプリケーションの読み込み時にすぐアニメーションを発生させたい場合は、 - eagerに読み込まれるアニメーションモジュールへ切り替える必要があります。代わりに`provideAnimations` + アプリケーションの読み込み直後にアニメーションを実行したい場合は、 + 即時読み込みされるアニメーションモジュールへ切り替える必要があります。代わりに`provideAnimations` を`@angular/platform-browser/animations`からインポートし、`bootstrapApplication` 関数呼び出しでは`provideAnimationsAsync`の**代わりに**`provideAnimations`を使用します。 -`NgModule`ベースのアプリケーションでは、`BrowserAnimationsModule`をインポートします。これは、Angularルートアプリケーションモジュールにアニメーション機能を導入します。 +`NgModule`ベースのアプリケーションでは、`BrowserAnimationsModule`をインポートします。これにより、アプリケーションのルートモジュールでアニメーション機能を利用できます。 @@ -67,7 +67,7 @@ bootstrapApplication(AppComponent, { ## トランジションをアニメーション化する {#animating-a-transition} -1つのHTML要素をある状態から別の状態へ変化させるトランジションをアニメーション化してみましょう。 +1つのHTML要素をある状態から別の状態へ変化させるトランジションを、アニメーション化してみましょう。 たとえば、ユーザーの直前の操作に応じて、ボタンに**Open**または**Closed**のどちらかを表示するように指定できます。 ボタンが`open`状態のときは表示され、黄色です。 `closed`状態のときは半透明で、青色です。 @@ -88,14 +88,14 @@ ng g component open-close ### アニメーションの状態とスタイル {#animation-state-and-styles} -Angularの[`state()`](api/animations/state)関数を使用して、各トランジションの最後で呼び出す異なる状態を定義します。 +Angularの[`state()`](api/animations/state)関数を使用して、各トランジションの終了時に適用する状態を定義します。 この関数は2つの引数を取ります: `open`や`closed`のような一意の名前と、`style()`関数です。 `style()`関数を使用して、指定した状態名に関連付けるスタイルのセットを定義します。 `backgroundColor`のようにダッシュを含むスタイル属性には_camelCase_を使うか、`'background-color'`のように引用符で囲む必要があります。 -Angularの[`state()`](api/animations/state)関数が、CSSスタイル属性を設定するために`style⁣­(⁠)`関数とどのように連携するかを見てみましょう。 +Angularの[`state()`](api/animations/state)関数が、CSSスタイル属性を設定する`style()`関数とどのように連携するかを見てみましょう。 このコードスニペットでは、その状態に対して複数のスタイル属性を同時に設定しています。 `open`状態では、ボタンの高さは200ピクセル、不透明度は1、背景色は黄色です。 @@ -110,12 +110,12 @@ Angularの[`state()`](api/animations/state)関数が、CSSスタイル属性を Angularでは、アニメーションなしでも複数のスタイルを設定できます。 ただし、さらに調整しなければ、ボタンはフェードや縮小などの変化を示さないまま瞬時に変形します。 -変化をそれほど唐突にしないためには、ある状態から別の状態へ一定時間のあいだに起こる変化を指定するアニメーション_トランジション_を定義する必要があります。 +変化をそれほど唐突にしないためには、2つの状態の間で一定時間かけて起こる変化を指定するアニメーション_トランジション_を定義する必要があります。 `transition()`関数は2つの引数を受け取ります: -1つ目の引数は2つのトランジション状態間の方向を定義する式、2つ目の引数は1つ以上の`animate()`ステップです。 +1つ目の引数は2つのトランジション状態の方向を定義する式で、2つ目の引数は1つ以上の`animate()`ステップです。 -`animate()`関数を使用して、トランジションの長さ、遅延、イージングを定義し、トランジション中のスタイルを定義する関数を指定します。 -`animate()`関数を使用して、複数ステップのアニメーションのために`keyframes()`関数を定義します。 +`animate()`関数では、トランジションの長さ、遅延、イージングを定義し、トランジション中のスタイルを指定します。 +`animate()`関数を使って、複数ステップのアニメーションのための`keyframes()`関数も定義できます。 これらの定義は、`animate()`関数の2つ目の引数に配置します。 #### アニメーションメタデータ: 継続時間、遅延、イージング {#animation-metadata-duration-delay-and-easing} @@ -181,7 +181,7 @@ HELPFUL: イージングカーブの一般情報については、Material Desig -HELPFUL: [`state`](api/animations/state)関数と`transition`関数内でスタイルを使用する際の追加メモです。 +HELPFUL: [`state()`](api/animations/state)関数と`transition()`関数内でスタイルを使用する際の補足です。 - [`state()`](api/animations/state)を使用すると、各トランジションの終了時に適用されるスタイルを定義できます。これらはアニメーション完了後も保持されます - `transition()`を使用すると、中間スタイルを定義でき、アニメーション中に動いているような錯覚を生み出します @@ -195,13 +195,13 @@ HELPFUL: [`state`](api/animations/state)関数と`transition`関数内でスタ ### アニメーションをトリガーする {#triggering-the-animation} アニメーションには、いつ開始すべきかを知るための_トリガー_が必要です。 -`trigger()`関数は状態とトランジションをまとめ、アニメーションに名前を付けることで、HTMLテンプレート内のトリガー対象要素にアタッチできるようにします。 +`trigger()`関数は状態とトランジションをまとめ、アニメーションに名前を付けることで、HTMLテンプレート内の対象要素に関連付けられるようにします。 `trigger()`関数は、変化を監視するプロパティ名を記述します。 変化が発生すると、トリガーはその定義に含まれるアクションを開始します。 これらのアクションは、後で見るように、トランジションやその他の関数です。 -この例では、トリガーに`openClose`という名前を付け、`button`要素にアタッチします。 +この例では、トリガーに`openClose`という名前を付け、`button`要素に関連付けます。 トリガーは、open状態とclosed状態、および2つのトランジションのタイミングを記述します。 HELPFUL: 各`trigger()`関数呼び出しの中では、要素は任意の時点で1つの状態にしかなれません。 @@ -214,20 +214,20 @@ HELPFUL: 各`trigger()`関数呼び出しの中では、要素は任意の時点 -コンポーネントのアニメーショントリガーを定義したら、そのコンポーネントのテンプレート内の要素に、トリガー名を角括弧で囲み、先頭に`@`記号を付けてアタッチします。 +コンポーネントのアニメーショントリガーを定義したら、そのコンポーネントのテンプレート内の要素に、トリガー名を角括弧で囲み、先頭に`@`記号を付けて関連付けます。 その後、次に示すように、標準のAngularプロパティバインディング構文を使ってトリガーをテンプレート式にバインドできます。ここで、`triggerName`はトリガー名、`expression`は定義済みのアニメーション状態に評価されます。 ```angular-html
…
``` -式の値が新しい状態に変化すると、アニメーションが実行、つまりトリガーされます。 +式の値が新しい状態に変化すると、アニメーションが実行されます。 次のコードスニペットでは、トリガーを`isOpen`プロパティの値にバインドしています。 -この例では、`isOpen`式が定義済みの`open`または`closed`状態に評価されると、トリガー`openClose`に状態変化を通知します。 +この例では、`isOpen`式の値が定義済みの`open`または`closed`状態になると、トリガー`openClose`に状態変化を通知します。 その後は、`openClose`のコードが状態変化を処理し、状態変化アニメーションを開始します。 ページに出入りする要素 \(DOMに挿入またはDOMから削除される要素\) では、アニメーションを条件付きにできます。 @@ -235,11 +235,11 @@ HELPFUL: 各`trigger()`関数呼び出しの中では、要素は任意の時点 HELPFUL: コンポーネントファイルでは、アニメーションを定義するトリガーを、`@Component()`デコレーター内の`animations:`プロパティの値として設定します。 -HTMLテンプレートファイルでは、トリガー名を使って、定義したアニメーションをアニメーション化するHTML要素にアタッチします。 +HTMLテンプレートファイルでは、トリガー名を使って、定義したアニメーションをアニメーション化するHTML要素に関連付けます。 ### コードレビュー {#code-review} -ここでは、トランジションの例で説明したコードファイルを示します。 +次のコードファイルが、トランジションの例で説明した内容です。 @@ -251,7 +251,7 @@ HTMLテンプレートファイルでは、トリガー名を使って、定義 `style()`と[`state()`](api/animations/state)、およびタイミングのための`animate()`を使用して、2つの状態間のトランジションにアニメーションを追加する方法を学びました。 -[transition and triggers](guide/animations/transition-and-triggers)の高度なテクニックから始めて、AnimationセクションでAngularアニメーションのより高度な機能を学んでください。 +より高度な機能については、[transition and triggers](guide/animations/transition-and-triggers)から読み進めてください。 ## Animations APIの概要 {#animations-api-summary} From cec1eb1e8e9f064561b26acf4e58e7fc1f897b0b Mon Sep 17 00:00:00 2001 From: InoueHirosi Date: Mon, 16 Mar 2026 00:52:44 +0900 Subject: [PATCH 4/4] Revert "Merge pull request #3 from ist-h-i/codex/feat-docs-translate-guide-animations-overview" This reverts commit d8430de41f53882d8e597b360dbaac1d82d4c911, reversing changes made to a2ba7527fbe05ed03ce1480c7501a8ad43df1db8. --- .../content/guide/animations/overview.en.md | 291 ----------------- .../src/content/guide/animations/overview.md | 298 +++++++++--------- 2 files changed, 149 insertions(+), 440 deletions(-) delete mode 100644 adev-ja/src/content/guide/animations/overview.en.md diff --git a/adev-ja/src/content/guide/animations/overview.en.md b/adev-ja/src/content/guide/animations/overview.en.md deleted file mode 100644 index ec2ee0d7c..000000000 --- a/adev-ja/src/content/guide/animations/overview.en.md +++ /dev/null @@ -1,291 +0,0 @@ -# Introduction to Angular animations - -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). 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. - -Animation provides the illusion of motion: HTML elements change styling over time. -Well-designed animations can make your application more fun and straightforward to use, but they aren't just cosmetic. -Animations can improve your application and user experience in a number of ways: - -- Without animations, web page transitions can seem abrupt and jarring -- Motion greatly enhances the user experience, so animations give users a chance to detect the application's response to their actions -- Good animations intuitively call the user's attention to where it is needed - -Typically, animations involve multiple style _transformations_ over time. -An HTML element can move, change color, grow or shrink, fade, or slide off the page. -These changes can occur simultaneously or sequentially. You can control the timing of each transformation. - -Angular's animation system is built on CSS functionality, which means you can animate any property that the browser considers animatable. -This includes positions, sizes, transforms, colors, borders, and more. -The W3C maintains a list of animatable properties on its [CSS Transitions](https://www.w3.org/TR/css-transitions-1) page. - -## About this guide - -This guide covers the basic Angular animation features to get you started on adding Angular animations to your project. - -## Getting started - -The main Angular modules for animations are `@angular/animations` and `@angular/platform-browser`. - -To get started with adding Angular animations to your project, import the animation-specific modules along with standard Angular functionality. - - - -Import `provideAnimationsAsync` from `@angular/platform-browser/animations/async` and add it to the providers list in the `bootstrapApplication` function call. - -```ts {header: "Enabling Animations", linenums} -bootstrapApplication(AppComponent, { - providers: [provideAnimationsAsync()], -}); -``` - - - If you need to have an animation happen immediately when your application is loaded, - you will want to switch to the eagerly loaded animations module. Import `provideAnimations` - from `@angular/platform-browser/animations` instead, and use `provideAnimations` **in place of** - `provideAnimationsAsync` in the `bootstrapApplication` function call. - - -For `NgModule` based applications import `BrowserAnimationsModule`, which introduces the animation capabilities into your Angular root application module. - - - - -If you plan to use specific animation functions in component files, import those functions from `@angular/animations`. - - - -See all [available animation functions](guide/legacy-animations#animations-api-summary) at the end of this guide. - - - -In the component file, add a metadata property called `animations:` within the `@Component()` decorator. -You put the trigger that defines an animation within the `animations` metadata property. - - - - - -## Animating a transition - -Let's animate a transition that changes a single HTML element from one state to another. -For example, you can specify that a button displays either **Open** or **Closed** based on the user's last action. -When the button is in the `open` state, it's visible and yellow. -When it's the `closed` state, it's translucent and blue. - -In HTML, these attributes are set using ordinary CSS styles such as color and opacity. -In Angular, use the `style()` function to specify a set of CSS styles for use with animations. -Collect a set of styles in an animation state, and give the state a name, such as `open` or `closed`. - -HELPFUL: Let's create a new `open-close` component to animate with simple transitions. - -Run the following command in terminal to generate the component: - -```shell -ng g component open-close -``` - -This will create the component at `src/app/open-close.ts`. - -### Animation state and styles - -Use Angular's [`state()`](api/animations/state) function to define different states to call at the end of each transition. -This function takes two arguments: -A unique name like `open` or `closed` and a `style()` function. - -Use the `style()` function to define a set of styles to associate with a given state name. -You must use _camelCase_ for style attributes that contain dashes, such as `backgroundColor` or wrap them in quotes, such as `'background-color'`. - -Let's see how Angular's [`state()`](api/animations/state) function works with the `style⁣­(⁠)` function to set CSS style attributes. -In this code snippet, multiple style attributes are set at the same time for the state. -In the `open` state, the button has a height of 200 pixels, an opacity of 1, and a yellow background color. - - - -In the following `closed` state, the button has a height of 100 pixels, an opacity of 0.8, and a background color of blue. - - - -### Transitions and timing - -In Angular, you can set multiple styles without any animation. -However, without further refinement, the button instantly transforms with no fade, no shrinkage, or other visible indicator that a change is occurring. - -To make the change less abrupt, you need to define an animation _transition_ to specify the changes that occur between one state and another over a period of time. -The `transition()` function accepts two arguments: -The first argument accepts an expression that defines the direction between two transition states, and the second argument accepts one or a series of `animate()` steps. - -Use the `animate()` function to define the length, delay, and easing of a transition, and to designate the style function for defining styles while transitions are taking place. -Use the `animate()` function to define the `keyframes()` function for multi-step animations. -These definitions are placed in the second argument of the `animate()` function. - -#### Animation metadata: duration, delay, and easing - -The `animate()` function \(second argument of the transition function\) accepts the `timings` and `styles` input parameters. - -The `timings` parameter takes either a number or a string defined in three parts. - -```ts -animate(duration); -``` - -or - -```ts -animate('duration delay easing'); -``` - -The first part, `duration`, is required. -The duration can be expressed in milliseconds as a number without quotes, or in seconds with quotes and a time specifier. -For example, a duration of a tenth of a second can be expressed as follows: - -- As a plain number, in milliseconds: - `100` - -- In a string, as milliseconds: - `'100ms'` - -- In a string, as seconds: - `'0.1s'` - -The second argument, `delay`, has the same syntax as `duration`. -For example: - -- Wait for 100ms and then run for 200ms: `'0.2s 100ms'` - -The third argument, `easing`, controls how the animation [accelerates and decelerates](https://easings.net) during its runtime. -For example, `ease-in` causes the animation to begin slowly, and to pick up speed as it progresses. - -- Wait for 100ms, run for 200ms. - Use a deceleration curve to start out fast and slowly decelerate to a resting point: - `'0.2s 100ms ease-out'` - -- Run for 200ms, with no delay. - Use a standard curve to start slow, accelerate in the middle, and then decelerate slowly at the end: - `'0.2s ease-in-out'` - -- Start immediately, run for 200ms. - Use an acceleration curve to start slow and end at full velocity: - `'0.2s ease-in'` - -HELPFUL: See the Material Design website's topic on [Natural easing curves](https://material.io/design/motion/speed.html#easing) for general information on easing curves. - -This example provides a state transition from `open` to `closed` with a 1-second transition between states. - - - -In the preceding code snippet, the `=>` operator indicates unidirectional transitions, and `<=>` is bidirectional. -Within the transition, `animate()` specifies how long the transition takes. -In this case, the state change from `open` to `closed` takes 1 second, expressed here as `1s`. - -This example adds a state transition from the `closed` state to the `open` state with a 0.5-second transition animation arc. - - - -HELPFUL: Some additional notes on using styles within [`state`](api/animations/state) and `transition` functions. - -- Use [`state()`](api/animations/state) to define styles that are applied at the end of each transition, they persist after the animation completes -- Use `transition()` to define intermediate styles, which create the illusion of motion during the animation -- When animations are disabled, `transition()` styles can be skipped, but [`state()`](api/animations/state) styles can't -- Include multiple state pairs within the same `transition()` argument: - - ```ts - transition('on => off, off => void'); - ``` - -### Triggering the animation - -An animation requires a _trigger_, so that it knows when to start. -The `trigger()` function collects the states and transitions, and gives the animation a name, so that you can attach it to the triggering element in the HTML template. - -The `trigger()` function describes the property name to watch for changes. -When a change occurs, the trigger initiates the actions included in its definition. -These actions can be transitions or other functions, as we'll see later on. - -In this example, we'll name the trigger `openClose`, and attach it to the `button` element. -The trigger describes the open and closed states, and the timings for the two transitions. - -HELPFUL: Within each `trigger()` function call, an element can only be in one state at any given time. -However, it's possible for multiple triggers to be active at once. - -### Defining animations and attaching them to the HTML template - -Animations are defined in the metadata of the component that controls the HTML element to be animated. -Put the code that defines your animations under the `animations:` property within the `@Component()` decorator. - - - -When you've defined an animation trigger for a component, attach it to an element in that component's template by wrapping the trigger name in brackets and preceding it with an `@` symbol. -Then, you can bind the trigger to a template expression using standard Angular property binding syntax as shown below, where `triggerName` is the name of the trigger, and `expression` evaluates to a defined animation state. - -```angular-html -
…
-``` - -The animation is executed or triggered when the expression value changes to a new state. - -The following code snippet binds the trigger to the value of the `isOpen` property. - - - -In this example, when the `isOpen` expression evaluates to a defined state of `open` or `closed`, it notifies the trigger `openClose` of a state change. -Then it's up to the `openClose` code to handle the state change and kick off a state change animation. - -For elements entering or leaving a page \(inserted or removed from the DOM\), you can make the animations conditional. -For example, use `*ngIf` with the animation trigger in the HTML template. - -HELPFUL: In the component file, set the trigger that defines the animations as the value of the `animations:` property in the `@Component()` decorator. - -In the HTML template file, use the trigger name to attach the defined animations to the HTML element to be animated. - -### Code review - -Here are the code files discussed in the transition example. - - - - - - - -### Summary - -You learned to add animation to a transition between two states, using `style()` and [`state()`](api/animations/state) along with `animate()` for the timing. - -Learn about more advanced features in Angular animations under the Animation section, beginning with advanced techniques in [transition and triggers](guide/legacy-animations/transition-and-triggers). - -## Animations API summary - -The functional API provided by the `@angular/animations` module provides a domain-specific language \(DSL\) for creating and controlling animations in Angular applications. -See the [API reference](api#animations) for a complete listing and syntax details of the core functions and related data structures. - -| Function name | What it does | -| :-------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `trigger()` | Kicks off the animation and serves as a container for all other animation function calls. HTML template binds to `triggerName`. Use the first argument to declare a unique trigger name. Uses array syntax. | -| `style()` | Defines one or more CSS styles to use in animations. Controls the visual appearance of HTML elements during animations. Uses object syntax. | -| [`state()`](api/animations/state) | Creates a named set of CSS styles that should be applied on successful transition to a given state. The state can then be referenced by name within other animation functions. | -| `animate()` | Specifies the timing information for a transition. Optional values for `delay` and `easing`. Can contain `style()` calls within. | -| `transition()` | Defines the animation sequence between two named states. Uses array syntax. | -| `keyframes()` | Allows a sequential change between styles within a specified time interval. Use within `animate()`. Can include multiple `style()` calls within each `keyframe()`. Uses array syntax. | -| [`group()`](api/animations/group) | Specifies a group of animation steps \(_inner animations_\) to be run in parallel. Animation continues only after all inner animation steps have completed. Used within `sequence()` or `transition()`. | -| `query()` | Finds one or more inner HTML elements within the current element. | -| `sequence()` | Specifies a list of animation steps that are run sequentially, one by one. | -| `stagger()` | Staggers the starting time for animations for multiple elements. | -| `animation()` | Produces a reusable animation that can be invoked from elsewhere. Used together with `useAnimation()`. | -| `useAnimation()` | Activates a reusable animation. Used with `animation()`. | -| `animateChild()` | Allows animations on child components to be run within the same timeframe as the parent. | - - - -## More on Angular animations - -HELPFUL: Check out this [presentation](https://www.youtube.com/watch?v=rnTK9meY5us), shown at the AngularConnect conference in November 2017, and the accompanying [source code](https://github.com/matsko/animationsftw.in). - -You might also be interested in the following: - - - - - - - - diff --git a/adev-ja/src/content/guide/animations/overview.md b/adev-ja/src/content/guide/animations/overview.md index 837f32519..ec2ee0d7c 100644 --- a/adev-ja/src/content/guide/animations/overview.md +++ b/adev-ja/src/content/guide/animations/overview.md @@ -1,36 +1,36 @@ -# Angularアニメーションの概要 +# Introduction to Angular animations -IMPORTANT: `@angular/animations`パッケージは現在非推奨です。Angularチームは、新しく書くコードのアニメーションには`animate.enter`と`animate.leave`を使ったネイティブCSSの利用を推奨します。詳しくは、新しいenterとleaveの[アニメーションガイド](guide/animations)を参照してください。また、アプリケーションで純粋なCSSアニメーションへの移行を始める方法については、[AngularのAnimationsパッケージからの移行](guide/animations/migration)も参照してください。 +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). 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. -アニメーションは動いているように見せる効果を生み出します。HTML要素のスタイルは時間の経過とともに変化します。 -適切に設計されたアニメーションは、アプリケーションをより楽しく、分かりやすく使えるようにしますが、単なる装飾ではありません。 -アニメーションは、いくつかの方法でアプリケーションとユーザー体験を向上させます。 +Animation provides the illusion of motion: HTML elements change styling over time. +Well-designed animations can make your application more fun and straightforward to use, but they aren't just cosmetic. +Animations can improve your application and user experience in a number of ways: -- アニメーションがないと、ウェブページの遷移は唐突でぎこちなく感じられることがあります -- モーションはユーザー体験を大きく向上させるため、アニメーションはユーザーが自分の操作に対するアプリケーションの応答を把握する機会を与えます -- 優れたアニメーションは、必要な場所へユーザーの注意を直感的に向けます +- Without animations, web page transitions can seem abrupt and jarring +- Motion greatly enhances the user experience, so animations give users a chance to detect the application's response to their actions +- Good animations intuitively call the user's attention to where it is needed -一般的に、アニメーションには時間の経過に沿った複数のスタイルの_変化_が含まれます。 -HTML要素は移動、色の変更、拡大や縮小、フェード、ページ外へのスライドができます。 -これらの変化は同時にも順番にも発生します。各変化のタイミングは制御できます。 +Typically, animations involve multiple style _transformations_ over time. +An HTML element can move, change color, grow or shrink, fade, or slide off the page. +These changes can occur simultaneously or sequentially. You can control the timing of each transformation. -AngularのアニメーションシステムはCSSの機能の上に構築されているため、ブラウザがアニメーション可能と見なす任意のプロパティをアニメーション化できます。 -これには、位置、サイズ、transform、色、境界線などが含まれます。 -W3Cは、アニメーション可能なプロパティの一覧を[CSS Transitions](https://www.w3.org/TR/css-transitions-1)ページで管理しています。 +Angular's animation system is built on CSS functionality, which means you can animate any property that the browser considers animatable. +This includes positions, sizes, transforms, colors, borders, and more. +The W3C maintains a list of animatable properties on its [CSS Transitions](https://www.w3.org/TR/css-transitions-1) page. -## このガイドについて {#about-this-guide} +## About this guide -このガイドでは、プロジェクトにAngularアニメーションを追加するための基本機能を紹介します。 +This guide covers the basic Angular animation features to get you started on adding Angular animations to your project. -## はじめに {#getting-started} +## Getting started -アニメーションに関する主なAngularモジュールは`@angular/animations`と`@angular/platform-browser`です。 +The main Angular modules for animations are `@angular/animations` and `@angular/platform-browser`. -プロジェクトでAngularアニメーションを使い始めるには、標準のAngular機能とあわせてアニメーション専用モジュールをインポートします。 +To get started with adding Angular animations to your project, import the animation-specific modules along with standard Angular functionality. - -`@angular/platform-browser/animations/async`から`provideAnimationsAsync`をインポートし、`bootstrapApplication`関数呼び出しのprovidersリストに追加します。 + +Import `provideAnimationsAsync` from `@angular/platform-browser/animations/async` and add it to the providers list in the `bootstrapApplication` function call. ```ts {header: "Enabling Animations", linenums} bootstrapApplication(AppComponent, { @@ -38,208 +38,208 @@ bootstrapApplication(AppComponent, { }); ``` - - アプリケーションの読み込み直後にアニメーションを実行したい場合は、 - 即時読み込みされるアニメーションモジュールへ切り替える必要があります。代わりに`provideAnimations` - を`@angular/platform-browser/animations`からインポートし、`bootstrapApplication` - 関数呼び出しでは`provideAnimationsAsync`の**代わりに**`provideAnimations`を使用します。 + + If you need to have an animation happen immediately when your application is loaded, + you will want to switch to the eagerly loaded animations module. Import `provideAnimations` + from `@angular/platform-browser/animations` instead, and use `provideAnimations` **in place of** + `provideAnimationsAsync` in the `bootstrapApplication` function call. -`NgModule`ベースのアプリケーションでは、`BrowserAnimationsModule`をインポートします。これにより、アプリケーションのルートモジュールでアニメーション機能を利用できます。 +For `NgModule` based applications import `BrowserAnimationsModule`, which introduces the animation capabilities into your Angular root application module. - -コンポーネントファイルで特定のアニメーション関数を使用する予定がある場合は、それらの関数を`@angular/animations`からインポートします。 + +If you plan to use specific animation functions in component files, import those functions from `@angular/animations`. -このガイドの末尾で、利用可能な[すべてのアニメーション関数](#animations-api-summary)を確認できます。 +See all [available animation functions](guide/legacy-animations#animations-api-summary) at the end of this guide. - -コンポーネントファイルで、`@Component()`デコレーター内に`animations:`というメタデータプロパティを追加します。 -アニメーションを定義するトリガーは、`animations`メタデータプロパティ内に配置します。 + +In the component file, add a metadata property called `animations:` within the `@Component()` decorator. +You put the trigger that defines an animation within the `animations` metadata property. -## トランジションをアニメーション化する {#animating-a-transition} +## Animating a transition -1つのHTML要素をある状態から別の状態へ変化させるトランジションを、アニメーション化してみましょう。 -たとえば、ユーザーの直前の操作に応じて、ボタンに**Open**または**Closed**のどちらかを表示するように指定できます。 -ボタンが`open`状態のときは表示され、黄色です。 -`closed`状態のときは半透明で、青色です。 +Let's animate a transition that changes a single HTML element from one state to another. +For example, you can specify that a button displays either **Open** or **Closed** based on the user's last action. +When the button is in the `open` state, it's visible and yellow. +When it's the `closed` state, it's translucent and blue. -HTMLでは、これらの属性は色や不透明度などの通常のCSSスタイルで設定します。 -Angularでは、アニメーションで使用するCSSスタイルのセットを指定するために`style()`関数を使用します。 -スタイルのセットをアニメーション状態としてまとめ、`open`や`closed`のような名前を付けます。 +In HTML, these attributes are set using ordinary CSS styles such as color and opacity. +In Angular, use the `style()` function to specify a set of CSS styles for use with animations. +Collect a set of styles in an animation state, and give the state a name, such as `open` or `closed`. -HELPFUL: 単純なトランジションでアニメーション化する新しい`open-close`コンポーネントを作成しましょう。 +HELPFUL: Let's create a new `open-close` component to animate with simple transitions. -コンポーネントを生成するには、ターミナルで次のコマンドを実行します: +Run the following command in terminal to generate the component: ```shell ng g component open-close ``` -これにより、`src/app/open-close.ts`にコンポーネントが作成されます。 +This will create the component at `src/app/open-close.ts`. -### アニメーションの状態とスタイル {#animation-state-and-styles} +### Animation state and styles -Angularの[`state()`](api/animations/state)関数を使用して、各トランジションの終了時に適用する状態を定義します。 -この関数は2つの引数を取ります: -`open`や`closed`のような一意の名前と、`style()`関数です。 +Use Angular's [`state()`](api/animations/state) function to define different states to call at the end of each transition. +This function takes two arguments: +A unique name like `open` or `closed` and a `style()` function. -`style()`関数を使用して、指定した状態名に関連付けるスタイルのセットを定義します。 -`backgroundColor`のようにダッシュを含むスタイル属性には_camelCase_を使うか、`'background-color'`のように引用符で囲む必要があります。 +Use the `style()` function to define a set of styles to associate with a given state name. +You must use _camelCase_ for style attributes that contain dashes, such as `backgroundColor` or wrap them in quotes, such as `'background-color'`. -Angularの[`state()`](api/animations/state)関数が、CSSスタイル属性を設定する`style()`関数とどのように連携するかを見てみましょう。 -このコードスニペットでは、その状態に対して複数のスタイル属性を同時に設定しています。 -`open`状態では、ボタンの高さは200ピクセル、不透明度は1、背景色は黄色です。 +Let's see how Angular's [`state()`](api/animations/state) function works with the `style⁣­(⁠)` function to set CSS style attributes. +In this code snippet, multiple style attributes are set at the same time for the state. +In the `open` state, the button has a height of 200 pixels, an opacity of 1, and a yellow background color. -続く`closed`状態では、ボタンの高さは100ピクセル、不透明度は0.8、背景色は青です。 +In the following `closed` state, the button has a height of 100 pixels, an opacity of 0.8, and a background color of blue. -### トランジションとタイミング {#transitions-and-timing} +### Transitions and timing -Angularでは、アニメーションなしでも複数のスタイルを設定できます。 -ただし、さらに調整しなければ、ボタンはフェードや縮小などの変化を示さないまま瞬時に変形します。 +In Angular, you can set multiple styles without any animation. +However, without further refinement, the button instantly transforms with no fade, no shrinkage, or other visible indicator that a change is occurring. -変化をそれほど唐突にしないためには、2つの状態の間で一定時間かけて起こる変化を指定するアニメーション_トランジション_を定義する必要があります。 -`transition()`関数は2つの引数を受け取ります: -1つ目の引数は2つのトランジション状態の方向を定義する式で、2つ目の引数は1つ以上の`animate()`ステップです。 +To make the change less abrupt, you need to define an animation _transition_ to specify the changes that occur between one state and another over a period of time. +The `transition()` function accepts two arguments: +The first argument accepts an expression that defines the direction between two transition states, and the second argument accepts one or a series of `animate()` steps. -`animate()`関数では、トランジションの長さ、遅延、イージングを定義し、トランジション中のスタイルを指定します。 -`animate()`関数を使って、複数ステップのアニメーションのための`keyframes()`関数も定義できます。 -これらの定義は、`animate()`関数の2つ目の引数に配置します。 +Use the `animate()` function to define the length, delay, and easing of a transition, and to designate the style function for defining styles while transitions are taking place. +Use the `animate()` function to define the `keyframes()` function for multi-step animations. +These definitions are placed in the second argument of the `animate()` function. -#### アニメーションメタデータ: 継続時間、遅延、イージング {#animation-metadata-duration-delay-and-easing} +#### Animation metadata: duration, delay, and easing -`animate()`関数 \(トランジション関数の2つ目の引数\) は、`timings`と`styles`の入力パラメーターを受け取ります。 +The `animate()` function \(second argument of the transition function\) accepts the `timings` and `styles` input parameters. -`timings`パラメーターは、数値または3つの部分で定義された文字列を取ります。 +The `timings` parameter takes either a number or a string defined in three parts. ```ts animate(duration); ``` -または +or ```ts animate('duration delay easing'); ``` -最初の部分である`duration`は必須です。 -継続時間は、引用符なしの数値でミリ秒として表すか、引用符付きで時間指定子を付けた秒として表せます。 -たとえば、10分の1秒の継続時間は次のように表せます: +The first part, `duration`, is required. +The duration can be expressed in milliseconds as a number without quotes, or in seconds with quotes and a time specifier. +For example, a duration of a tenth of a second can be expressed as follows: -- 単なる数値で、ミリ秒として: +- As a plain number, in milliseconds: `100` -- 文字列で、ミリ秒として: +- In a string, as milliseconds: `'100ms'` -- 文字列で、秒として: +- In a string, as seconds: `'0.1s'` -2つ目の引数`delay`は、`duration`と同じ構文です。 -例: +The second argument, `delay`, has the same syntax as `duration`. +For example: -- 100ms待ってから200ms実行する: `'0.2s 100ms'` +- Wait for 100ms and then run for 200ms: `'0.2s 100ms'` -3つ目の引数`easing`は、アニメーションが実行中にどのように[加速および減速するか](https://easings.net)を制御します。 -たとえば、`ease-in`はアニメーションをゆっくり開始させ、進行するにつれて速度を上げます。 +The third argument, `easing`, controls how the animation [accelerates and decelerates](https://easings.net) during its runtime. +For example, `ease-in` causes the animation to begin slowly, and to pick up speed as it progresses. -- 100ms待って、200ms実行する。 - 減速カーブを使用して高速に開始し、停止点に向かってゆっくり減速します: +- Wait for 100ms, run for 200ms. + Use a deceleration curve to start out fast and slowly decelerate to a resting point: `'0.2s 100ms ease-out'` -- 200ms実行し、遅延はなし。 - 標準カーブを使用してゆっくり開始し、中盤で加速し、終盤でゆっくり減速します: +- Run for 200ms, with no delay. + Use a standard curve to start slow, accelerate in the middle, and then decelerate slowly at the end: `'0.2s ease-in-out'` -- すぐに開始して、200ms実行する。 - 加速カーブを使用してゆっくり開始し、最大速度で終わります: +- Start immediately, run for 200ms. + Use an acceleration curve to start slow and end at full velocity: `'0.2s ease-in'` -HELPFUL: イージングカーブの一般情報については、Material Designの[Natural easing curves](https://material.io/design/motion/speed.html#easing)を参照してください。 +HELPFUL: See the Material Design website's topic on [Natural easing curves](https://material.io/design/motion/speed.html#easing) for general information on easing curves. -この例では、`open`から`closed`への状態トランジションを、状態間で1秒かけて行います。 +This example provides a state transition from `open` to `closed` with a 1-second transition between states. -上のコードスニペットでは、`=>`演算子は単方向トランジションを示し、`<=>`は双方向です。 -トランジション内では、`animate()`がトランジションにかかる時間を指定します。 -この場合、`open`から`closed`への状態変化は1秒で、ここでは`1s`と表現しています。 +In the preceding code snippet, the `=>` operator indicates unidirectional transitions, and `<=>` is bidirectional. +Within the transition, `animate()` specifies how long the transition takes. +In this case, the state change from `open` to `closed` takes 1 second, expressed here as `1s`. -この例では、`closed`状態から`open`状態への状態トランジションを、0.5秒のトランジションアニメーションで追加しています。 +This example adds a state transition from the `closed` state to the `open` state with a 0.5-second transition animation arc. -HELPFUL: [`state()`](api/animations/state)関数と`transition()`関数内でスタイルを使用する際の補足です。 +HELPFUL: Some additional notes on using styles within [`state`](api/animations/state) and `transition` functions. -- [`state()`](api/animations/state)を使用すると、各トランジションの終了時に適用されるスタイルを定義できます。これらはアニメーション完了後も保持されます -- `transition()`を使用すると、中間スタイルを定義でき、アニメーション中に動いているような錯覚を生み出します -- アニメーションが無効な場合、`transition()`のスタイルはスキップされることがありますが、[`state()`](api/animations/state)のスタイルはスキップされません -- 同じ`transition()`引数内に複数の状態ペアを含めます: +- Use [`state()`](api/animations/state) to define styles that are applied at the end of each transition, they persist after the animation completes +- Use `transition()` to define intermediate styles, which create the illusion of motion during the animation +- When animations are disabled, `transition()` styles can be skipped, but [`state()`](api/animations/state) styles can't +- Include multiple state pairs within the same `transition()` argument: ```ts transition('on => off, off => void'); ``` -### アニメーションをトリガーする {#triggering-the-animation} +### Triggering the animation -アニメーションには、いつ開始すべきかを知るための_トリガー_が必要です。 -`trigger()`関数は状態とトランジションをまとめ、アニメーションに名前を付けることで、HTMLテンプレート内の対象要素に関連付けられるようにします。 +An animation requires a _trigger_, so that it knows when to start. +The `trigger()` function collects the states and transitions, and gives the animation a name, so that you can attach it to the triggering element in the HTML template. -`trigger()`関数は、変化を監視するプロパティ名を記述します。 -変化が発生すると、トリガーはその定義に含まれるアクションを開始します。 -これらのアクションは、後で見るように、トランジションやその他の関数です。 +The `trigger()` function describes the property name to watch for changes. +When a change occurs, the trigger initiates the actions included in its definition. +These actions can be transitions or other functions, as we'll see later on. -この例では、トリガーに`openClose`という名前を付け、`button`要素に関連付けます。 -トリガーは、open状態とclosed状態、および2つのトランジションのタイミングを記述します。 +In this example, we'll name the trigger `openClose`, and attach it to the `button` element. +The trigger describes the open and closed states, and the timings for the two transitions. -HELPFUL: 各`trigger()`関数呼び出しの中では、要素は任意の時点で1つの状態にしかなれません。 -ただし、複数のトリガーを同時にアクティブにできます。 +HELPFUL: Within each `trigger()` function call, an element can only be in one state at any given time. +However, it's possible for multiple triggers to be active at once. -### アニメーションを定義してHTMLテンプレートにアタッチする {#defining-animations-and-attaching-them-to-the-html-template} +### Defining animations and attaching them to the HTML template -アニメーションは、アニメーション化するHTML要素を制御するコンポーネントのメタデータで定義します。 -アニメーションを定義するコードは、`@Component()`デコレーター内の`animations:`プロパティの下に配置します。 +Animations are defined in the metadata of the component that controls the HTML element to be animated. +Put the code that defines your animations under the `animations:` property within the `@Component()` decorator. -コンポーネントのアニメーショントリガーを定義したら、そのコンポーネントのテンプレート内の要素に、トリガー名を角括弧で囲み、先頭に`@`記号を付けて関連付けます。 -その後、次に示すように、標準のAngularプロパティバインディング構文を使ってトリガーをテンプレート式にバインドできます。ここで、`triggerName`はトリガー名、`expression`は定義済みのアニメーション状態に評価されます。 +When you've defined an animation trigger for a component, attach it to an element in that component's template by wrapping the trigger name in brackets and preceding it with an `@` symbol. +Then, you can bind the trigger to a template expression using standard Angular property binding syntax as shown below, where `triggerName` is the name of the trigger, and `expression` evaluates to a defined animation state. ```angular-html
…
``` -式の値が新しい状態に変化すると、アニメーションが実行されます。 +The animation is executed or triggered when the expression value changes to a new state. -次のコードスニペットでは、トリガーを`isOpen`プロパティの値にバインドしています。 +The following code snippet binds the trigger to the value of the `isOpen` property. -この例では、`isOpen`式の値が定義済みの`open`または`closed`状態になると、トリガー`openClose`に状態変化を通知します。 -その後は、`openClose`のコードが状態変化を処理し、状態変化アニメーションを開始します。 +In this example, when the `isOpen` expression evaluates to a defined state of `open` or `closed`, it notifies the trigger `openClose` of a state change. +Then it's up to the `openClose` code to handle the state change and kick off a state change animation. -ページに出入りする要素 \(DOMに挿入またはDOMから削除される要素\) では、アニメーションを条件付きにできます。 -たとえば、HTMLテンプレートでアニメーショントリガーと一緒に`*ngIf`を使用します。 +For elements entering or leaving a page \(inserted or removed from the DOM\), you can make the animations conditional. +For example, use `*ngIf` with the animation trigger in the HTML template. -HELPFUL: コンポーネントファイルでは、アニメーションを定義するトリガーを、`@Component()`デコレーター内の`animations:`プロパティの値として設定します。 +HELPFUL: In the component file, set the trigger that defines the animations as the value of the `animations:` property in the `@Component()` decorator. -HTMLテンプレートファイルでは、トリガー名を使って、定義したアニメーションをアニメーション化するHTML要素に関連付けます。 +In the HTML template file, use the trigger name to attach the defined animations to the HTML element to be animated. -### コードレビュー {#code-review} +### Code review -次のコードファイルが、トランジションの例で説明した内容です。 +Here are the code files discussed in the transition example. @@ -247,45 +247,45 @@ HTMLテンプレートファイルでは、トリガー名を使って、定義 -### まとめ {#summary} +### Summary -`style()`と[`state()`](api/animations/state)、およびタイミングのための`animate()`を使用して、2つの状態間のトランジションにアニメーションを追加する方法を学びました。 +You learned to add animation to a transition between two states, using `style()` and [`state()`](api/animations/state) along with `animate()` for the timing. -より高度な機能については、[transition and triggers](guide/animations/transition-and-triggers)から読み進めてください。 +Learn about more advanced features in Angular animations under the Animation section, beginning with advanced techniques in [transition and triggers](guide/legacy-animations/transition-and-triggers). -## Animations APIの概要 {#animations-api-summary} +## Animations API summary -`@angular/animations`モジュールが提供する関数型APIは、Angularアプリケーションでアニメーションを作成および制御するためのドメイン固有言語 \(DSL\) を提供します。 -コア関数と関連データ構造の完全な一覧と構文の詳細については、[APIリファレンス](api/animations)を参照してください。 +The functional API provided by the `@angular/animations` module provides a domain-specific language \(DSL\) for creating and controlling animations in Angular applications. +See the [API reference](api#animations) for a complete listing and syntax details of the core functions and related data structures. -| 関数名 | 役割 | -| :------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `trigger()` | アニメーションを開始し、他のすべてのアニメーション関数呼び出しのコンテナーとして機能します。HTMLテンプレートは`triggerName`にバインドします。最初の引数を使って一意のトリガー名を宣言します。配列構文を使用します。 | -| `style()` | アニメーションで使用する1つ以上のCSSスタイルを定義します。アニメーション中のHTML要素の見た目を制御します。オブジェクト構文を使用します。 | -| [`state()`](api/animations/state) | 指定した状態へのトランジションが成功したときに適用される、名前付きのCSSスタイルセットを作成します。この状態は、他のアニメーション関数内で名前で参照できます。 | -| `animate()` | トランジションのタイミング情報を指定します。`delay`と`easing`は省略可能です。内部に`style()`呼び出しを含められます。 | -| `transition()` | 2つの名前付き状態間のアニメーションシーケンスを定義します。配列構文を使用します。 | -| `keyframes()` | 指定した時間範囲内で順次スタイルを変化させます。`animate()`の中で使用します。各`keyframe()`の内側に複数の`style()`呼び出しを含められます。配列構文を使用します。 | -| [`group()`](api/animations/group) | 並列に実行するアニメーションステップのグループ（_内側のアニメーション_）を指定します。すべての内側のアニメーションステップが完了した後でのみ、アニメーションは続行されます。`sequence()`または`transition()`内で使用します。 | -| `query()` | 現在の要素の内側にある1つ以上のHTML要素を検索します。 | -| `sequence()` | 順番に1つずつ実行されるアニメーションステップのリストを指定します。 | -| `stagger()` | 複数要素のアニメーション開始時刻をずらします。 | -| `animation()` | 別の場所から呼び出せる再利用可能なアニメーションを生成します。`useAnimation()`と併用します。 | -| `useAnimation()` | 再利用可能なアニメーションを有効化します。`animation()`と併用します。 | -| `animateChild()` | 子コンポーネントのアニメーションを、親と同じ時間枠で実行できるようにします。 | +| Function name | What it does | +| :-------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `trigger()` | Kicks off the animation and serves as a container for all other animation function calls. HTML template binds to `triggerName`. Use the first argument to declare a unique trigger name. Uses array syntax. | +| `style()` | Defines one or more CSS styles to use in animations. Controls the visual appearance of HTML elements during animations. Uses object syntax. | +| [`state()`](api/animations/state) | Creates a named set of CSS styles that should be applied on successful transition to a given state. The state can then be referenced by name within other animation functions. | +| `animate()` | Specifies the timing information for a transition. Optional values for `delay` and `easing`. Can contain `style()` calls within. | +| `transition()` | Defines the animation sequence between two named states. Uses array syntax. | +| `keyframes()` | Allows a sequential change between styles within a specified time interval. Use within `animate()`. Can include multiple `style()` calls within each `keyframe()`. Uses array syntax. | +| [`group()`](api/animations/group) | Specifies a group of animation steps \(_inner animations_\) to be run in parallel. Animation continues only after all inner animation steps have completed. Used within `sequence()` or `transition()`. | +| `query()` | Finds one or more inner HTML elements within the current element. | +| `sequence()` | Specifies a list of animation steps that are run sequentially, one by one. | +| `stagger()` | Staggers the starting time for animations for multiple elements. | +| `animation()` | Produces a reusable animation that can be invoked from elsewhere. Used together with `useAnimation()`. | +| `useAnimation()` | Activates a reusable animation. Used with `animation()`. | +| `animateChild()` | Allows animations on child components to be run within the same timeframe as the parent. | -## Angularアニメーションについてさらに詳しく {#more-on-angular-animations} +## More on Angular animations -HELPFUL: 2017年11月のAngularConnectカンファレンスで紹介されたこの[プレゼンテーション](https://www.youtube.com/watch?v=rnTK9meY5us)と、付属する[ソースコード](https://github.com/matsko/animationsftw.in)も確認してください。 +HELPFUL: Check out this [presentation](https://www.youtube.com/watch?v=rnTK9meY5us), shown at the AngularConnect conference in November 2017, and the accompanying [source code](https://github.com/matsko/animationsftw.in). -次の項目にも興味があるかもしれません: +You might also be interested in the following: - - - - - + + + + +