Html 天使17：令人惊叹的动画

第一个问题是动画没有被添加到html中，它是用[@staggerAnimation]="projects.length"来完成的

在此之后，请将延迟向上移动到主div，这会导致动画无法工作，请在下面找到一个工作示例！

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { provideAnimations } from '@angular/platform-browser/animations';
import {
  trigger,
  transition,
  query,
  stagger,
  animate,
  keyframes,
  style,
} from '@angular/animations';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  providers: [],
  template: `
  @defer (on viewport;){
    <div class="grid grid-items"  [@staggerAnimation]="projects.length">
        @for (project of projects; track project.id;) {
        <div class="container">
            <h4>{{project.name}}</h4>
            <p>
                {{project.description}}
            </p>
            <a class="explore-btn" href="{{project.link}}" target="_blank">Explore</a>
        </div>
        }
    </div>
        } @placeholder {
        <div>Loading Projects...</div>
        }
    <button (click)="add()">add</button>
  `,
  animations: [
    trigger('staggerAnimation', [
      transition('* => *', [
        query(':enter', style({ opacity: 0 }), { optional: true }),
        query(
          ':enter',
          stagger('300ms', [
            animate(
              '1s ease-in',
              keyframes([
                style({
                  opacity: 0,
                  transform: 'translateY(-75px)',
                  offset: 0,
                }),
                style({
                  opacity: 0.5,
                  transform: 'translateY(35px)',
                  offset: 0.3,
                }),
                style({ opacity: 1, transform: 'translateY(0)', offset: 1 }),
              ])
            ),
          ])
        ),
      ]),
    ]),
  ],
})
export class App {
  name = 'Angular';
  id = 5;
  projects = [
    { name: 'test', description: 'test', link: 'https://google.com', id: 1 },
    { name: 'test', description: 'test', link: 'https://google.com', id: 2 },
    { name: 'test', description: 'test', link: 'https://google.com', id: 3 },
    { name: 'test', description: 'test', link: 'https://google.com', id: 4 },
    { name: 'test', description: 'test', link: 'https://google.com', id: 5 },
  ];

  add() {
    this.id = this.id++;
    this.projects.push({
      name: 'test',
      description: 'test',
      link: 'https://google.com',
      id: this.id,
    });
  }
}

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

stackblitz个