Angular 动画

1.先做一个简单的例子

 => 

　　定义一个div 从open渐变成closed

　　ts：定义一个触发器 openClose，有两个状态 open 和 closed，均有对应的样式，再定义装换函数 transition

import { Component, OnInit} from '@angular/core';
// 动画函数
import { trigger, state, style, animate, transition } from '@angular/animations';
@Component({
  selector: 'app-study',
  templateUrl: './study.component.html',
  styleUrls: ['./study.component.scss'],
  animations: [
    trigger('openClose', [
      state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'yellow'
      })),
      state('closed', style({
        height: '100px',
        opacity: 0.5,
        backgroundColor: 'green'
      })),
      transition('open => closed', [animate('1s')]),
      transition('closed => open', [animate('0.5s')]),
    ]),
  ],
})
export class StudyComponent implements OnInit {
  isOpen = true;
  constructor() {
  }

  ngOnInit() {
  }

  toggle() {
    this.isOpen = !this.isOpen;
  }
}

　　html：@后面指定触发器 并赋值状态

<div [@openClose]="isOpen? 'open':'closed'" (click)="toggle()">
  <p>The box is now {{isOpen?'Open':'Closed'}}!</p>
</div>