feat(docs): translate route transition animations documentation to Japanese (#1063)

Author: lacolaco

adev-ja/src/content/guide/routing/route-transition-animations.en.md

@@ -0,0 +1,213 @@
+# Route transition animations
+
+Route transition animations enhance user experience by providing smooth visual transitions when navigating between different views in your Angular application. [Angular Router](/guide/routing/overview) includes built-in support for the browser's View Transitions API, enabling seamless animations between route changes in supported browsers.
+
+HELPFUL: The Router's native View Transitions integration is currently in [developer preview](/reference/releases#developer-preview). Native View Transitions are a relatively new browser feature with limited support across all browsers.
+
+## How View Transitions work
+
+View transitions use the browser's native [`document.startViewTransition` API](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) to create smooth animations between different states of your application. The API works by:
+
+1. **Capturing the current state** - The browser takes a screenshot of the current page
+2. **Executing the DOM update** - Your callback function runs to update the DOM
+3. **Capturing the new state** - The browser captures the updated page state
+4. **Playing the transition** - The browser animates between the old and new states
+
+Here's the basic structure of the `startViewTransition` API:
+
+```ts
+document.startViewTransition(async () => {
+  await updateTheDOMSomehow();
+});
+```
+
+For more details about the browser API, see the [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions).
+
+## How the Router uses view transitions
+
+Angular Router integrates view transitions into the navigation lifecycle to create seamless route changes. During navigation, the Router:
+
+1. **Completes navigation preparation** - Route matching, [lazy loading](/guide/routing/define-routes#lazily-loaded-components), [guards](/guide/routing/route-guards), and [resolvers](/guide/routing/data-resolvers) execute
+2. **Initiates the view transition** - Router calls `startViewTransition` when routes are ready for activation
+3. **Updates the DOM** - Router activates new routes and deactivates old ones within the transition callback
+4. **Finalizes the transition** - The transition Promise resolves when Angular completes rendering
+
+The Router's view transition integration acts as a [progressive enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement). When browsers don't support the View Transitions API, the Router performs normal DOM updates without animation, ensuring your application works across all browsers.
+
+## Enabling View Transitions in the Router
+
+Enable view transitions by adding the `withViewTransitions` feature to your [router configuration](/guide/routing/define-routes#adding-the-router-to-your-application). Angular supports both standalone and NgModule bootstrap approaches:
+
+### Standalone bootstrap
+
+```ts
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideRouter, withViewTransitions } from '@angular/router';
+import { routes } from './app.routes';
+
+bootstrapApplication(MyApp, {
+  providers: [
+    provideRouter(routes, withViewTransitions()),
+  ]
+});
+```
+
+### NgModule bootstrap
+
+```ts
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, {enableViewTransitions: true})]
+})
+export class AppRouting {}
+```
+
+[Try the "count" example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-2dnvtm?file=src%2Fmain.ts)
+
+This example demonstrates how router navigation can replace direct `startViewTransition` calls for counter updates.
+
+## Customizing transitions with CSS
+
+You can customize view transitions using CSS to create unique animation effects. The browser creates separate transition elements that you can target with CSS selectors.
+
+To create custom transitions:
+
+1. **Add view-transition-name** - Assign unique names to elements you want to animate
+2. **Define global animations** - Create CSS animations in your global styles
+3. **Target transition pseudo-elements** - Use `::view-transition-old()` and `::view-transition-new()` selectors
+
+Here's an example that adds a rotation effect to a counter element:
+
+```css
+/* Define keyframe animations */
+@keyframes rotate-out {
+  to {
+    transform: rotate(90deg);
+  }
+}
+
+@keyframes rotate-in {
+  from {
+    transform: rotate(-90deg);
+  }
+}
+
+/* Target view transition pseudo-elements */
+::view-transition-old(count),
+::view-transition-new(count) {
+  animation-duration: 200ms;
+  animation-name: -ua-view-transition-fade-in, rotate-in;
+}
+
+::view-transition-old(count) {
+  animation-name: -ua-view-transition-fade-out, rotate-out;
+}
+```
+
+IMPORTANT: Define view transition animations in your global styles file, not in component styles. Angular's [view encapsulation](/guide/components/styling#view-encapsulation) scopes component styles, which prevents them from targeting the transition pseudo-elements correctly.
+
+[Try the updated “count” example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-fwn4i7?file=src%2Fmain.ts)
+
+## Advanced transition control with onViewTransitionCreated
+
+The `withViewTransitions` feature accepts an options object with an `onViewTransitionCreated` callback for advanced control over view transitions. This callback:
+
+- Runs in an [injection context](/guide/di/dependency-injection-context#run-within-an-injection-context)
+- Receives a [`ViewTransitionInfo`](/api/router/ViewTransitionInfo) object containing:
+  - The `ViewTransition` instance from `startViewTransition`
+  - The [`ActivatedRouteSnapshot`](/api/router/ActivatedRouteSnapshot) for the route being navigated from
+  - The [`ActivatedRouteSnapshot`](/api/router/ActivatedRouteSnapshot) for the route being navigated to
+
+Use this callback to customize transition behavior based on navigation context. For example, you can skip transitions for specific navigation types:
+
+```ts
+import { inject } from '@angular/core';
+import { Router, withViewTransitions } from '@angular/router';
+
+withViewTransitions({
+  onViewTransitionCreated: ({transition}) => {
+    const router = inject(Router);
+    const targetUrl = router.getCurrentNavigation()!.finalUrl!;
+
+    // Skip transition if only fragment or query params change
+    const config = {
+      paths: 'exact',
+      matrixParams: 'exact',
+      fragment: 'ignored',
+      queryParams: 'ignored',
+    };
+
+    if (router.isActive(targetUrl, config)) {
+      transition.skipTransition();
+    }
+  },
+})
+```
+
+This example skips the view transition when navigation only changes the [URL fragment or query parameters](/guide/routing/read-route-state#query-parameters) (such as anchor links within the same page). The `skipTransition()` method prevents the animation while still allowing the navigation to complete.
+
+## Examples from the Chrome explainer adapted to Angular
+
+The following examples demonstrate various view transition techniques adapted from the Chrome team's documentation for use with Angular Router:
+
+### Transitioning elements don't need to be the same DOM element
+
+Elements can transition smoothly between different DOM elements as long as they share the same `view-transition-name`.
+
+- [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#transitioning_elements_dont_need_to_be_the_same_dom_element)
+- [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-dh8npr?file=src%2Fmain.ts)
+
+### Custom entry and exit animations
+
+Create unique animations for elements entering and leaving the viewport during route transitions.
+
+- [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#custom_entry_and_exit_transitions)
+- [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-8kly3o)
+
+### Async DOM updates and waiting for content
+
+Angular Router prioritizes immediate transitions over waiting for additional content to load.
+
+- [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#async_dom_updates_and_waiting_for_content)
+
+NOTE: Angular Router does not provide a way to delay view transitions. This design choice prevents pages from becoming non-interactive while waiting for additional content. As the Chrome documentation notes: "During this time, the page is frozen, so delays here should be kept to a minimum…in some cases it's better to avoid the delay altogether, and use the content you already have."
+
+### Handle multiple view transition styles with view transition types
+
+Use view transition types to apply different animation styles based on navigation context.
+
+- [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#view-transition-types)
+- [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-vxzcam)
+
+### Handle multiple view transition styles with a class name on the view transition root (deprecated)
+
+This approach uses CSS classes on the transition root element to control animation styles.
+
+- [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#changing-on-navigation-type)
+- [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-nmnzzg?file=src%2Fmain.ts)
+
+### Transitioning without freezing other animations
+
+Maintain other page animations during view transitions to create more dynamic user experiences.
+
+- [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#transitioning-without-freezing)
+- [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-76kgww)
+
+### Animating with JavaScript
+
+Control view transitions programmatically using JavaScript APIs for complex animation scenarios.
+
+- [Chrome Explainer](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#animating-with-javascript)
+- [Angular Example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-cklnkm)
+
+## Alternative: Angular Animations
+
+If you need broader browser support or more granular control over animations, you can use the [`@angular/animations`](/guide/animations) package instead of native view transitions. Angular's animation system works with router state changes and provides:
+
+- **Universal browser support** - Works across all browsers that support Angular
+- **Fine-grained control** - Define complex animation sequences and timing
+- **Router integration** - Create animations based on route changes, URL patterns, or [`ActivatedRoute`](/api/router/ActivatedRoute) data
+
+Learn more about creating route-based animations with [animation triggers and transitions](/guide/animations/transition-and-triggers).