animation on angular 4 doesn't seem to have transition effect

Question

trigger('expandCollapse', [
            state('open', style({
                'height': '*'
            })),
            state('close', style({
                'height': '0px'
            })),
            transition('open <=> close', animate(1000))
        ])

using this code to animate expand collapse, the expand collapse works fine but there is no animation on height using angular animation framework 4.3.1

https://plnkr.co/edit/tY4z1QPvdKMeU6M82cTF?p=preview

created a small demo for the same

Answer 1

The problem is that NoopAnimationsModule. This works:

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { trigger, state, style, transition, animate } from '@angular/animations';
@Component({
  selector: 'my-app',
  template: `
    <div>
    <button (click) ="openReportsFilter()">Open Close</button>
      <h2 [@expandCollapse] = 'openCloseAnim'>Hello {{name}}</h2>
    </div>
  `,
  animations: [
        trigger('expandCollapse', [
            state('open', style({
                'height': '*'
            })),
            state('close', style({
                'height': '0px'
            })),
            transition('open <=> close', animate(1000))
        ])
    ]
})
export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
    this.openCloseAnim = 'open';
  }
  openReportsFilter(): void {
        this.openCloseAnim = (this.openCloseAnim == 'open') ? 'close' : 'open';
    }
}

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


}

Answer 2

I've modified your code a little bit. You can check out the demo here: https://plnkr.co/edit/S7YdfUZN2t0fey9pgo6x?p=preview

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'my-app',
  template: `
    <div>
    <button (click) ="openReportsFilter()">Open Close</button>
      <h2 *ngIf="openCloseAnim" [@expandCollapse] = 'openCloseAnim'>Hello {{name}}</h2>
    </div>
  `,
  animations: [
        trigger('expandCollapse', [ 
          state('expandCollapseState', style({height: '*'})),
      transition('* => void', [style({height: '*'}), animate(1000, style({height: "0"})) ]),
      transition('void => *', [style({height: '0'}), animate(1000, style({height: "*"})) ])
    ]
})
export class App {
  name:string;
  openCloseAnim: boolean = true;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
  openReportsFilter(): void {
    console.log('clicked');
    this.openCloseAnim = !this.openCloseAnim;
    console.log(this.openCloseAnim);
        //this.openCloseAnim = (this.openCloseAnim == true) ? false : true;
    }
}

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


}