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: ,

        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;

  }

}

<div [@openClose]="isOpen? 'open':'closed'" (click)="toggle()">

  <p>The box is now {{isOpen?'Open':'Closed'}}!</p>

</div>