transition in angular 6 using style

import { Component, OnInit } from '@angular/core';

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

@Component({

selector: 'app-test-transition',

templateUrl: './test-transition.component.html',

styleUrls: ['./test-transition.component.css'],

animations: [

trigger('toggleState', [

state('true', style({ height: '100px', width: '200px', background: '#FFFF00'})),

state('false', style({ height: '200px', width: '400px', background: '#00FF00' })),

// transition

transition('* => *', animate('900ms')),

])

],

})

export class TestTransitionComponent implements OnInit {

shouldToggle=true;

constructor() { }

ngOnInit() {

}

handleClick=function () {

this.shouldToggle = !this.shouldToggle;

}

}

<p>

test-transition works!

</p>

<div>

<div class="div1" [@toggleState]="shouldToggle">

</div>

<input type="button" value="Change" (click)="handleClick()">

</div>