Angular 动画效果中使用变量

安装动画库

npm install @angular/animations --save

我的动画库版本

“@angular/animations”: “^6.1.0”,

app.module.ts文件

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // 就是这个模块
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html文件

<div class="square" [@square]="{value:squareState, params: {divHeigth: divHeigth}}"></div>

app.component.css文件

.square {
    margin: 0 auto;
    width: 300px;
    height: 100px;
    background-color: black;
    background: cornflowerblue;
}

app.component.ts文件

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('square', [
      state('initial', style({
        height: '200px'
      })),
      state('final', style({
        height: "{{divHeigth}}px"
      }), { params: { divHeigth: "200" } }),
      transition('initial => final', animate('5s ease-in')),
      transition('final => initial', animate('5s ease-out'))
    ]),
  ]
})
export class AppComponent implements OnInit {
  divHeigth: number;
  squareState = 'initial';
  ngOnInit() {
    this.divHeigth = 500;
    setTimeout(() => {
      this.squareState = 'final';
    }, 500);
  }
}