@@ -5,12 +5,12 @@ Vue は何らかの変化に応じてトランジションやアニメーショ
5
5
6
6
- 組み込みコンポーネントの ` <transition> ` を使用して、CSS と JS の両方で DOM に出入りするコンポーネントをフックします。
7
7
- トランジションの途中の順序を調整できるようにトランジションモードがあります。
8
- - ` <transition-group> ` コンポーネントを使用すると、パフォーマンス向上のために内部でFLIP手法が適用され 、複数の要素が所定の位置で更新された時にフックします。
8
+ - ` <transition-group> ` コンポーネントを使用すると、パフォーマンス向上のために内部で FLIP 手法が適用され 、複数の要素が所定の位置で更新された時にフックします。
9
9
- アプリケーション内をさまざまな状態へ遷移するには ` watchers ` を使用します。
10
10
11
11
このガイドの次の3つのセクションでは、上記のことについてすべて説明します。 ただし、提供する便利な API とは別に、前セクションで説明したクラスとスタイルの宣言を使用して、アニメーションやトランジションを適用し、より単純なユースケースにすることもできます。
12
12
13
- この次のセクションでは、いくつかの Web アニメーションとトランジションの基本について説明し、さらに詳しく調べるためにいくつかのリソースにリンクします。Web アニメーションとそれらの原則が Vue のディレクティブの一部でどのように機能するか既に理解している場合、次のセクションをスキップしてください。Webアニメーションの基本についてもう少し学びたい人は 、次のセクションを読んでください。
13
+ この次のセクションでは、いくつかの Web アニメーションとトランジションの基本について説明し、さらに詳しく調べるためにいくつかのリソースにリンクします。Web アニメーションとそれらの原則が Vue のディレクティブの一部でどのように機能するか既に理解している場合、次のセクションをスキップしてください。Web アニメーションの基本についてもう少し学びたい人は 、次のセクションを読んでください。
14
14
15
15
## クラスベースのアニメーションとトランジション
16
16
@@ -153,7 +153,7 @@ backface-visibility: hidden;
153
153
transform: translateZ(0);
154
154
```
155
155
156
- GreenSock のような多くのJSライブラリは 、ハードウェアアクセラレーションが必要になることを想定してデフォルトで適用するため、手動で設定する必要はありません。
156
+ GreenSock のような多くの JS ライブラリは 、ハードウェアアクセラレーションが必要になることを想定してデフォルトで適用するため、手動で設定する必要はありません。
157
157
158
158
## タイミング
159
159
@@ -197,7 +197,7 @@ GreenSock のような多くのJSライブラリは、ハードウェアアク
197
197
</p >
198
198
<script async src =" https://static.codepen.io/assets/embed/ei.js " ></script >
199
199
200
- イージングを調整することで多くのユニークな効果を得ることができ、アニメーションを非常にスタイリッシュにすることができます。 CSSを使用すると 、3次のベジェ曲線のプロパティを調整して変形できます。 Lea Verou 氏によって作成された [ Playground] ( https://cubic-bezier.com/#.17,.67,.83,.67 ) は、イージングを探索するのに非常に役立ちます。
200
+ イージングを調整することで多くのユニークな効果を得ることができ、アニメーションを非常にスタイリッシュにすることができます。CSS を使用すると 、3次のベジェ曲線のプロパティを調整して変形できます。 Lea Verou 氏によって作成された [ Playground] ( https://cubic-bezier.com/#.17,.67,.83,.67 ) は、イージングを探索するのに非常に役立ちます。
201
201
202
202
3次のベジェ曲線が提供する2つのハンドルを使用すると単純なアニメーションで優れた効果を実現できますが、JavaScript では複数のハンドルを使用できるため、より多くのバリエーションが可能になります。
203
203
0 commit comments