typescript Angular 4基本动画#angular #js

Posted 2021-05-21

import { HeroService } from './../../services/hero.service';
import { Hero } from './../../hero';
import {
    Component,
    Input
  } from '@angular/core';
  import {
    trigger,
    state,
    style,
    animate,
    transition
  } from '@angular/animations';
  
  
  @Component({
    selector: 'app-hero-list-basic',
    styleUrls: ['./hero-list-basic.css'],
    template: `
      <ul style="width:250px;list-style:none;">
        <li *ngFor="let hero of heroes"
            [@heroState]="hero.state"
            (@heroState.done)="animationDone($event)"
            (click)="toggleState(hero)" class="module hero">
          {{hero.name}}
        </li>
      </ul>
    `,
    animations: [
      trigger('heroState', [
        state('inactive', style({
          transform: 'scale(1)'
        })),
        state('active', style({
          transform: 'scale(0.5)'
        })),
        transition('inactive => active', animate('100ms ease-in')),
        transition('active => inactive', animate('100ms ease-out'))
      ])
    ]
  })
  export class HeroListBasicComponent {
     @Input() heroes: Hero[];

     constructor(private heroService: HeroService) { }
     
     ngOnInit(): void {
        this.heroService.getHeroes()
          .then(heroes => this.heroes = heroes.slice(1, 5));
    }
    toggleState(hero: Hero) {
      hero.state = (hero.state === 'active' ? 'inactive' : 'active');
    }

    animationDone($event: Event) {
      console.log('animation is over');
      console.log($event);
    }
  }