Angular使用animation动画

Angular使用animation动画

step1: D:\vue\untitled2902\src\app\app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import { OpenCloseComponent } from './open-close/open-close.component';

@NgModule({
  declarations: [
    AppComponent,
    OpenCloseComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

step2: D:\vue\untitled2902\src\app\app.component.html

<h1>测试</h1>
<app-open-close></app-open-close>

step3: D:\vue\untitled2902\src\app\open-close\open-close.component.ts

import {Component, OnInit} from '@angular/core';
import {animate, state, style, transition, trigger} from "@angular/animations";

@Component({
  selector: 'app-open-close',
  templateUrl: './open-close.component.html',
  styleUrls: ['./open-close.component.css'],
  animations: [
    trigger('openClose', [
      state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: "yellow"
      })),
      state('closed', style({
        height: '100px',
        opacity: 0.8,
        backgroundColor: "blue"
      })),
      transition('open => closed', [
        animate('1s')
      ]),
      transition('closed => open', [
        animate('0.5s')
      ]),
    ]),
  ]
})
export class OpenCloseComponent implements OnInit {

  isOpen = true;

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


  constructor() {
  }

  ngOnInit(): void {
  }

}

step4: D:\vue\untitled2902\src\app\open-close\open-close.component.html

<div>
  <nav>
    <button type="button" (click)="toggle()">Toggle open / Close</button>
  </nav>
  <div [@openClose]="isOpen ? 'open':'closed'" class="open-close-container">
    <p>the box is now {{isOpen ? 'open':'Closed'}}!</p>
  </div>
</div>

end