如何在Angular 2+中实现Animation Anchoring功能？

Great question! Angular 2+ doesn’t include a direct out-of-the-box replacement for AngularJS 1.4’s Animation Anchoring feature, but you can absolutely replicate this cross-route anchored animation behavior with a mix of Angular’s native tools and a bit of manual DOM work. Here’s a step-by-step breakdown of how to approach it:

Core Concept Recap #

First, to align with what you know from AngularJS: we’ll need to:

1. Mark shared elements across source and target routes with a unique identifier
2. Capture the source element’s state (position, size, styles) before route change
3. Create a clone of the source element to animate between the source and target positions
4. Animate the clone, then clean it up once the transition completes

Step 1: Mark Anchored Elements #

Add a custom attribute (like data-animate-ref) to elements in both your source and target route components, using the same value for matching pairs:

<!-- Source route component -->
<div 
  data-animate-ref="product-hero-image"
  class="product-image"
  [style.backgroundImage]="'url(' + currentProduct.imageUrl + ')'"
></div>

<!-- Target route component -->
<div 
  data-animate-ref="product-hero-image"
  class="product-detail-image"
  [style.backgroundImage]="'url(' + selectedProduct.imageUrl + ')'"
></div>

Step 2: Capture Source Element State Pre-Route-Change #

Use a route guard (specifically CanDeactivate) to grab the source element’s position, dimensions, and key styles before the route switches. Store this data in a shared service so the target route can access it:

// anchor-animation.service.ts
@Injectable({ providedIn: 'root' })
export class AnchorAnimationService {
  private anchorData = new Map<string, { element: HTMLElement; rect: DOMRect }>();

  storeAnchorData(refs: string[]) {
    this.anchorData.clear();
    refs.forEach(ref => {
      const element = document.querySelector(`[data-animate-ref="${ref}"]`) as HTMLElement;
      if (element) {
        this.anchorData.set(ref, {
          element: element.cloneNode(true) as HTMLElement,
          rect: element.getBoundingClientRect()
        });
      }
    });
  }

  getAnchorData(ref: string) {
    return this.anchorData.get(ref);
  }

  clearAnchorData() {
    this.anchorData.clear();
  }
}

// animate-anchor.guard.ts
@Injectable()
export class AnimateAnchorGuard implements CanDeactivate<unknown> {
  constructor(private anchorService: AnchorAnimationService) {}

  canDeactivate(): Observable<boolean> {
    // Pass the refs you want to track (or fetch them dynamically)
    this.anchorService.storeAnchorData(['product-hero-image']);
    return of(true);
  }
}

Don’t forget to register the guard on your source route in the routing module:

const routes: Routes = [
  {
    path: 'products',
    component: ProductListComponent,
    canDeactivate: [AnimateAnchorGuard]
  },
  // ... other routes
];

Step 3: Animate the Clone in the Target Route #

Once the target route component loads, use AfterViewInit to access the target element, create the clone, and run the animation using Angular’s AnimationBuilder:

// product-detail.component.ts
@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements AfterViewInit {
  constructor(
    private anchorService: AnchorAnimationService,
    private renderer: Renderer2,
    private animationBuilder: AnimationBuilder
  ) {}

  ngAfterViewInit(): void {
    const anchorRef = 'product-hero-image';
    const sourceData = this.anchorService.getAnchorData(anchorRef);
    const targetElement = document.querySelector(`[data-animate-ref="${anchorRef}"]`) as HTMLElement;

    if (!sourceData || !targetElement) return;

    // Hide the target element temporarily
    this.renderer.setStyle(targetElement, 'opacity', '0');

    // Create and position the clone
    const clone = sourceData.element;
    this.renderer.setStyle(clone, 'position', 'fixed');
    this.renderer.setStyle(clone, 'top', `${sourceData.rect.top}px`);
    this.renderer.setStyle(clone, 'left', `${sourceData.rect.left}px`);
    this.renderer.setStyle(clone, 'width', `${sourceData.rect.width}px`);
    this.renderer.setStyle(clone, 'height', `${sourceData.rect.height}px`);
    this.renderer.setStyle(clone, 'pointer-events', 'none'); // Prevent interaction during animation
    this.renderer.appendChild(document.body, clone);

    // Get target element's final position
    const targetRect = targetElement.getBoundingClientRect();

    // Build and run the animation
    const animation = this.animationBuilder.build([
      animate('600ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({
        top: `${targetRect.top}px`,
        left: `${targetRect.left}px`,
        width: `${targetRect.width}px`,
        height: `${targetRect.height}px`,
        opacity: 0
      }))
    ]);

    const player = animation.create(clone);
    player.onDone(() => {
      // Clean up clone and show target element
      this.renderer.removeChild(document.body, clone);
      this.renderer.setStyle(targetElement, 'opacity', '1');
      this.anchorService.clearAnchorData();
    });

    player.play();
  }
}

Key Edge Cases to Handle #

• Route cancellation: If the route change is aborted (e.g., user clicks back mid-transition), make sure to clean up the clone and clear stored anchor data. You can handle this in route guards or by listening to router events.
• Responsive layouts: If the viewport resizes during the animation, recalculate positions or cancel the animation to avoid glitches.
• Multiple anchored elements: Extend the service to handle multiple refs by looping through all stored anchor data instead of a single ref.
• Dynamic content: If elements are loaded asynchronously (e.g., from an API), wait for the content to render before capturing state or starting the animation (use ViewChild with waitFor: true or AfterContentInit).

Alternative: Third-Party Tools #

If you don’t want to build this from scratch, some community libraries simplify cross-route animations (though none are direct 1:1 replacements for AngularJS’s Animation Anchoring). However, the manual approach above gives you full control over the animation behavior.

内容的提问来源于stack exchange，提问作者Maxime