animation sur 4 angulaire ne semble pas avoir un effet de transition

Question

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

en utilisant ce code pour animer expand collapse, les travaux effondrement expansion très bien, mais il n'y a pas d'animation sur la hauteur à l'aide d'animation cadre angulaire 4.3.1

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

a créé une petite démo pour le même

Answer 1

le problème est que NoopAnimationsModule. Cela fonctionne:

//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

J'ai modifié votre code un peu. Vous pouvez consulter la démo ici: 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 { 


}