mirror of
https://github.com/affaan-m/everything-claude-code.git
synced 2026-06-12 19:23:07 +08:00
feat(ja-JP): add skill sub-reference translations (angular, remotion, etc.)
Translated 85 skill sub-reference files to achieve full parity with the English source: - skills/angular-developer/references/ — 35 files (all references) - skills/remotion-video-creation/rules/ — 28 files (all rules) - skills/tinystruct-patterns/references/ — 5 files - skills/openclaw-persona-forge/references/ — 6 files - skills/skill-comply/prompts/ — 3 files - skills/lead-intelligence/agents/ — 4 files - skills/brand-voice/references/ — 1 file - skills/frontend-slides/ — 2 files - hooks/memory-persistence/README.md — 1 file English source parity: 0 missing files (excluding rules/zh/, internal docs, and experimental examples absent from zh-CN)
This commit is contained in:
@@ -0,0 +1,56 @@
|
||||
# ルートトランジションアニメーション
|
||||
|
||||
Angular ルーターは、ルート間のスムーズなビジュアルトランジションのためにブラウザの **View Transitions API** をサポートしています。
|
||||
|
||||
## ビュートランジションの有効化
|
||||
|
||||
ルーター設定に `withViewTransitions()` を追加します。
|
||||
|
||||
```ts
|
||||
provideRouter(routes, withViewTransitions());
|
||||
```
|
||||
|
||||
これは**プログレッシブエンハンスメント**です。API をサポートしていないブラウザでも、ルーターは引き続き動作しますが、トランジションアニメーションは行われません。
|
||||
|
||||
## 仕組み
|
||||
|
||||
1. ブラウザが古い状態のスクリーンショットを撮ります。
|
||||
2. ルーターが DOM を更新します(新しいコンポーネントをアクティベートします)。
|
||||
3. ブラウザが新しい状態のスクリーンショットを撮ります。
|
||||
4. ブラウザが2つの状態の間をアニメーションします。
|
||||
|
||||
## CSS によるカスタマイズ
|
||||
|
||||
トランジションは**グローバル CSS ファイル**でカスタマイズします(コンポーネントスコープの CSS ではありません)。
|
||||
|
||||
`::view-transition-old()` と `::view-transition-new()` 疑似要素を使用します。
|
||||
|
||||
```css
|
||||
/* 例:クロスフェード + スライド */
|
||||
::view-transition-old(root) {
|
||||
animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
|
||||
}
|
||||
::view-transition-new(root) {
|
||||
animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in;
|
||||
}
|
||||
```
|
||||
|
||||
## 高度な制御
|
||||
|
||||
`onViewTransitionCreated` を使用して、ナビゲーションコンテキストに基づいてトランジションをスキップしたり、動作をカスタマイズしたりします。
|
||||
|
||||
```ts
|
||||
withViewTransitions({
|
||||
onViewTransitionCreated: ({transition, from, to}) => {
|
||||
// 特定のルートに対してアニメーションをスキップ
|
||||
if (to.url === '/no-animation') {
|
||||
transition.skipTransition();
|
||||
}
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## ベストプラクティス
|
||||
|
||||
- **グローバルスタイル**:ビューカプセル化の問題を避けるため、トランジションアニメーションは常に `styles.css` で定義してください。
|
||||
- **ビュートランジション名**:ルートをまたいでスムーズにトランジションさせたい要素(ヘッダー画像など)には、一意の `view-transition-name` を割り当ててください。
|
||||
Reference in New Issue
Block a user