1分钟入门angular动画效果animations，敲简单滴哟~~☺

ng g c animate-test

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';//注意这个很重要
 
 
BrowserAnimationsModule,//注意这个很关键,没有引入动不起来

<button (click)="toggle()">{{yellowOrGreen ? '你黄了！':'你被绿了！'}}</button>
<div [@openClose]="yellowOrGreen ? 'yellow' : 'green'" >
  <p>{{yellowOrGreen ? '你黄了！':'你被绿了！'}}</p>
</div>

import {Component, OnInit} from '@angular/core';
import {trigger, state, style, animate, transition} from '@angular/animations';
 
@Component({
  selector: 'app-animate-test',
  templateUrl: './animate-test.component.html',
  styleUrls: ['./animate-test.component.css'],
  animations: [
    trigger('openClose', [
      state('yellow', style({height: '50px', color: 'black', backgroundColor: 'yellow'})),
      state('green', style({height: '100px', color: 'white', fontSize: '40px', fontWeight: 'bold', backgroundColor: 'green'})
      ),
      transition('yellow=>green', [animate('0.3s')]),
      transition('green=>yellow', [animate('0.5s')]),
      // transition('yellow <=> green', [animate('1s')]) //双箭头可以指定两个状态互相转场
    ])
  ]
})
export class AnimateTestComponent implements OnInit {
  public yellowOrGreen = true;
 
  ngOnInit() {
  }
 
  public toggle() {
    this.yellowOrGreen = !this.yellowOrGreen;
  }
}

import {AnimateTestComponent} from "./components/animate-test/animate-test.component";
 
  {
    path: 'animate-test',
    component: AnimateTestComponent,//同步加载
  },