子元素的角度动画不起作用

Question

我找不到动画不起作用的原因。我想对其进行动画处理，以便每个子元素都能轻松、交错地进入。

const fadeInStagger = trigger('fadeInStagger', [
  transition('* => *', [
    query(':enter', [
      style({ opacity: 0, transform: 'translateY(-20px)' }),
      stagger('200ms', [
        style({ opacity: 0, transform: 'translateY(-20px)' }),
        animate('1s ease-in', style({ opacity: 1, transform: 'translateY(0)' }))
      ])
    ], { optional: true })
  ])
]);

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule, RouterOutlet, RouterLink],
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  animations: [fadeInStagger],
})
export class HomeComponent implements OnInit {
  stateService = inject(StateService);

  constructor() {}

  ngOnInit(): void {
    this.stateService.resetState();
    localStorage.clear();
  }
}

<div @fadeInStagger class="my-10 flex flex-col items-center justify-center gap-6">
    <h1 class="">Welcome!</h1>
    <p class="subtitle">Click on the button below to start the challenge!</p>
    <div class="mt-2">
        <a [routerLink]="['/captcha']" class="home-button btn text-lg">Start</a>
    </div>
</div>

Answer 1

您的转换应输入：

transition(':enter', ...)

因为你的容器元素（div）正在进入视图。

*

状态不包括

void

状态，并且由于

:enter

相当于

void => *

，因此不关心您的动画。

接下来，您应该查询任何子元素：

query(':self > *', ...)
// If it does not work with :self
query('> *', ...)
// If it does not work with direct children selector
query('h1,.mt-2,p', ...)

最后，你的交错不需要先应用样式，因为你已经在上面完成了

stagger('200ms', [
  animate('1s ease-in', style({ opacity: 1, transform: 'translateY(0)' }))
])