角度动画使用具有自定义延迟的查询中的交错

Question

我正在使用 Angular 15 动画来处理页面上图像的显示。

transition(':enter', [
  query('.chat', [
    style({ opacity: 0, transform: 'translateY(30px)' }),
    stagger('0.75s', [ 
      animate('250ms', style({ opacity: 1 , transform: 'translateY(0)' }))
    ])
  ])
])

这工作正常，我有一个带有子图像的 div，分配了“聊天”类。

      <div *ngIf="isVisible" @fadeSlideInOutStagger >      
        <img class="chat" src="/chat1.webp"/> 
        <img class="chat" src="/chat2.webp"/> 
        <img class="chat" src="/chat3.webp"/> 
      </div>

但我想在子元素之间引入延迟。我希望第二张图像的延迟时间是第一张图像的两倍，最后一张图像的延迟时间是第一张图像的一半。目前，存在交错参数中定义的固定延迟。

这个可以吗。我似乎无法访问单个子元素，因为效果是由父 div 处理的。

如果效果本身无法处理，那么可以通过编程方式处理子元素的引入吗？不确定这有多可行。

有人有让这个工作的经验吗？

Answer 1

您可以在子级别定义动画，然后传入一个名为

params

的

delay

属性，这可以用于引入动画中的延迟。

<div *ngIf="isVisible">      
  <img class="chat" src="https://placehold.co/200x200/jpeg" [@childAnimation]="{value: '', params:{ delay:1000 }}"/> 
  <img class="chat" src="https://placehold.co/200x200/jpeg" [@childAnimation]="{value: '', params:{ delay:2000 }}"/> 
  <img class="chat" src="https://placehold.co/200x200/jpeg" [@childAnimation]="{value: '', params:{ delay:3000 }}"/> 
</div>

动画：

animations: [
  trigger('childAnimation', [
    transition(
      ':enter',
      [
        style({ opacity: 0, transform: 'translateY(30px)' }),
        animate(
          '2000ms {{delay}}ms',
          style({ opacity: 1, transform: 'translateX(0)' })
        ),
      ],
      { params: { delay: 1 } }
    ),
  ]),
],

完整代码：

import { Component, inject, Injectable, Input, OnInit } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';
import { Observable, of, Subject, BehaviorSubject } from 'rxjs';
import { CommonModule } from '@angular/common';
import {
  transition,
  query,
  style,
  stagger,
  animate,
  trigger,
} from '@angular/animations';
@Component({
  selector: 'app-root',
  imports: [CommonModule],
  template: `
    <div *ngIf="isVisible">      
      <img class="chat" src="https://placehold.co/200x200/jpeg" [@childAnimation]="{value: '', params:{ delay:1000 }}"/> 
      <img class="chat" src="https://placehold.co/200x200/jpeg" [@childAnimation]="{value: '', params:{ delay:2000 }}"/> 
      <img class="chat" src="https://placehold.co/200x200/jpeg" [@childAnimation]="{value: '', params:{ delay:3000 }}"/> 
    </div>
  `,
  animations: [
    trigger('childAnimation', [
      transition(
        ':enter',
        [
          style({ opacity: 0, transform: 'translateY(30px)' }),
          animate(
            '2000ms {{delay}}ms',
            style({ opacity: 1, transform: 'translateX(0)' })
          ),
        ],
        { params: { delay: 1 } }
      ),
    ]),
  ],
})
export class App {
  isVisible = true;
}

bootstrapApplication(App, {
  providers: [provideAnimations()],
});

Stackblitz 演示