angular简单的动画

app-moduel上加

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';

imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],

html代码

<!-- <div class="traffic-light" [@动画触发器]="'动画的状态名'"></div> -->
<div class="traffic-light" [@signal]="singnal" ></div>
<button (click)='go()'>go</button><button (click)='stop()'>stop</button>

css代码

.traffic-light{  width: 100px;  height: 100px;  background-color: black;  }

ts代码

import { Component, OnInit } from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition
} from '@angular/animations';
@Component({
  selector: 'app-shelf',
  templateUrl: './shelf.component.html',
  styleUrls: ['./shelf.component.css'],
  animations: [
    trigger('signal', [
      state('go', style({
        'background-color': 'green'
      })),
      state('stop',style({
        'background-color': 'red'
      })),
      transition('go => stop', animate('1000ms ease-in')),
      transition('stop => go', animate('1000ms ease-out'))
    ])
  ]

})
export class ShelfComponent implements OnInit {
  // 动画名状态
  singnal:string='';
  constructor() { }

  ngOnInit() {
  }
  //绑定事件
  go(){
    this.singnal='go'
  }
  stop(){
    this.singnal='stop'
  }
}