From 617e952c79908278aa3355251630ae4e9e25d5b2 Mon Sep 17 00:00:00 2001 From: InoueHirosi Date: Mon, 16 Mar 2026 01:22:21 +0900 Subject: [PATCH 1/3] Feat(docs) translate guide/animations/reusable-animations --- .../animations/reusable-animations.en.md | 38 +++++++++++++++++++ .../guide/animations/reusable-animations.md | 38 +++++++++---------- 2 files changed, 57 insertions(+), 19 deletions(-) create mode 100644 adev-ja/src/content/guide/animations/reusable-animations.en.md diff --git a/adev-ja/src/content/guide/animations/reusable-animations.en.md b/adev-ja/src/content/guide/animations/reusable-animations.en.md new file mode 100644 index 000000000..b1519edfe --- /dev/null +++ b/adev-ja/src/content/guide/animations/reusable-animations.en.md @@ -0,0 +1,38 @@ +# Reusable 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. + +This topic provides some examples of how to create reusable animations. + +## Create reusable animations + +To create a reusable animation, use the [`animation()`](api/animations/animation) function to define an animation in a separate `.ts` file and declare this animation definition as a `const` export variable. +You can then import and reuse this animation in any of your application components using the [`useAnimation()`](api/animations/useAnimation) function. + + + +In the preceding code snippet, `transitionAnimation` is made reusable by declaring it as an export variable. + +HELPFUL: The `height`, `opacity`, `backgroundColor`, and `time` inputs are replaced during runtime. + +You can also export a part of an animation. +For example, the following snippet exports the animation `trigger`. + + + +From this point, you can import reusable animation variables in your component class. +For example, the following code snippet imports the `transitionAnimation` variable and uses it via the `useAnimation()` function. + + + +## More on Angular animations + +You might also be interested in the following: + + + + + + + + diff --git a/adev-ja/src/content/guide/animations/reusable-animations.md b/adev-ja/src/content/guide/animations/reusable-animations.md index b1519edfe..3b9b2b88f 100644 --- a/adev-ja/src/content/guide/animations/reusable-animations.md +++ b/adev-ja/src/content/guide/animations/reusable-animations.md @@ -1,38 +1,38 @@ -# Reusable 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. +IMPORTANT: `@angular/animations`パッケージは現在非推奨です。Angularチームは、新しく書くコードのアニメーションには`animate.enter`と`animate.leave`を使ったネイティブCSSの利用を推奨します。詳しくは、新しいenterとleaveの[アニメーションガイド](guide/animations)を参照してください。また、アプリケーションで純粋なCSSアニメーションへの移行を始める方法については、[AngularのAnimationsパッケージからの移行](guide/animations/migration)も参照してください。 -This topic provides some examples of how to create reusable animations. +このトピックでは、再利用可能なアニメーションを作成する方法の例をいくつか紹介します。 -## Create reusable animations +## 再利用可能なアニメーションを作成する {#create-reusable-animations} -To create a reusable animation, use the [`animation()`](api/animations/animation) function to define an animation in a separate `.ts` file and declare this animation definition as a `const` export variable. -You can then import and reuse this animation in any of your application components using the [`useAnimation()`](api/animations/useAnimation) function. +再利用可能なアニメーションを作成するには、[`animation()`](api/animations/animation)関数を使って別の`.ts`ファイルにアニメーションを定義し、そのアニメーション定義を`const`のエクスポート変数として宣言します。 +その後、[`useAnimation()`](api/animations/useAnimation)関数を使って、このアニメーションをアプリケーション内の任意のコンポーネントにインポートして再利用できます。 -In the preceding code snippet, `transitionAnimation` is made reusable by declaring it as an export variable. +前のコードスニペットでは、`transitionAnimation`をエクスポート変数として宣言することで再利用可能にしています。 -HELPFUL: The `height`, `opacity`, `backgroundColor`, and `time` inputs are replaced during runtime. +HELPFUL: `height`、`opacity`、`backgroundColor`、`time`の入力値は実行時に置き換えられます。 -You can also export a part of an animation. -For example, the following snippet exports the animation `trigger`. +アニメーションの一部もエクスポートできます。 +たとえば、次のスニペットではアニメーションの`trigger`をエクスポートしています。 -From this point, you can import reusable animation variables in your component class. -For example, the following code snippet imports the `transitionAnimation` variable and uses it via the `useAnimation()` function. +ここから先は、再利用可能なアニメーション変数をコンポーネントクラスにインポートできます。 +たとえば、次のコードスニペットでは`transitionAnimation`変数をインポートし、`useAnimation()`関数を通して使用しています。 -## More on Angular animations +## Angularアニメーションについてさらに詳しく {#more-on-angular-animations} -You might also be interested in the following: +次のトピックも参考にしてください。 - - - - - + + + + + From 0f353ba2d24efb3296c3779406ae7192be387098 Mon Sep 17 00:00:00 2001 From: InoueHirosi Date: Mon, 16 Mar 2026 12:47:39 +0900 Subject: [PATCH 2/3] Fix(docs) revert migration wording in reusable animations --- adev-ja/src/content/guide/animations/reusable-animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/adev-ja/src/content/guide/animations/reusable-animations.md b/adev-ja/src/content/guide/animations/reusable-animations.md index 3b9b2b88f..34feaa871 100644 --- a/adev-ja/src/content/guide/animations/reusable-animations.md +++ b/adev-ja/src/content/guide/animations/reusable-animations.md @@ -27,7 +27,7 @@ HELPFUL: `height`、`opacity`、`backgroundColor`、`time`の入力値は実行 ## Angularアニメーションについてさらに詳しく {#more-on-angular-animations} -次のトピックも参考にしてください。 +以下の項目にも興味があるかもしれません： From 7c99bb377001ac7273bab3d662e6555f042618ff Mon Sep 17 00:00:00 2001 From: InoueHirosi Date: Thu, 19 Mar 2026 10:29:18 +0900 Subject: [PATCH 3/3] Update reusable-animations.md --- adev-ja/src/content/guide/animations/reusable-animations.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/adev-ja/src/content/guide/animations/reusable-animations.md b/adev-ja/src/content/guide/animations/reusable-animations.md index 34feaa871..d2ff46632 100644 --- a/adev-ja/src/content/guide/animations/reusable-animations.md +++ b/adev-ja/src/content/guide/animations/reusable-animations.md @@ -30,9 +30,9 @@ HELPFUL: `height`、`opacity`、`backgroundColor`、`time`の入力値は実行 以下の項目にも興味があるかもしれません： - - - + + +