Tengo un contenedor que se expande/encoge. Hay un elemento dentro de ese contenedor que debería aparecer gradualmente cuando el contenedor se expande y desaparecer cuando el contenedor se encoge.
Mi problema
¿Cómo hago que todas las animaciones se ejecuten en paralelo en ambas condiciones de expansión/reducción?
Tenga en cuenta el uso de ngIf . Esto es intencional ya que destruye el elemento al final de la secuencia de animación.
Aquí hay un plunkr de mi estado actual: https://embed.plnkr.co/TXYoGf9QpErWmlRvQF9Z/
La clase de componente:
export class App { expanded = true; toggleExpandedState() { this.expanded = !this.expanded; } constructor() { } }La plantilla:
<div class="container" [@expansionTrigger]="expanded"> <div class="constant-item"></div> <div class="fade-item" [@stateAnimation] *ngIf="expanded"></div> </div> <button (click)="toggleExpandedState()">Toggle Fade</button>y la animación del componente:
trigger('expansionTrigger', [ state('1', style({ width: '250px' })), state('0', style({ width: '160px' })), transition('0 => 1', animate('200ms ease-in')), transition('1 => 0', animate('200ms ease-out')) ]), trigger('stateAnimation', [ transition(':enter', [ style({ opacity: 0 }), animate('200ms 350ms ease-in', style({ opacity: 1 })) ]), transition(':leave', [ style({ opacity: 1 }) animate('1s', style({ opacity: 0 })) ]) ])Con la esperanza de evitar la frustración de otros, parece que es un error con Angular 4.
Actualmente hay dos problemas abiertos en Github que parecen estar bastante relacionados:
https://github.com/angular/angular/issues/15798
https://github.com/angular/angular/issues/15753
Actualizar
De acuerdo con el problema de github, el error de animación no se solucionará para que funcione como antes en Angular2. En su lugar, se están introduciendo query() y animateChild() . Las nuevas funciones de animación están disponibles a partir de 4.2.0-rc2.
En resumen:
Definición de componente
@Component({ selector: 'my-app', template: ` <div> <h2>Hello {{name}}</h2> <button (click)="toggle()">Toggle</button> <div *ngIf="show" @ngIfAnimation> <h3 @easeInOut>I'm inside ngIf</h3> </div> </div> `, animations: [ trigger('ngIfAnimation', [ transition(':enter, :leave', [ query('@*', animateChild()) ]) ]) trigger('easeInOut', [ transition('void => *', [ style({ opacity: 0 }), animate("1s ease-in-out", style({ opacity: 1 })) ]), transition('* => void', [ style({ opacity: 1 }), animate("1s ease-in-out", style({ opacity: 0 })) ]) ]) ]] }) export class App { name:string; show:boolean = false; constructor() { this.name = `Angular! v${VERSION.full}` } toggle() { this.show = !this.show; } }Hay un ejemplo práctico disponible aquí: https://embed.plnkr.co/RJgAunJfibBKNFt0DCZS/
esto es lo que tendrás que hacer:
plnkr aquí: https://plnkr.co/edit/AQEVh3GGc31ivQZMp223?p=preview
elimine *ngIf="expanded" use [@stateAnimation]="expanded"
reemplace su disparador stateAnimate con esto:
trigger('stateAnimation', [ state('1', style({ opacity: 0 })), state('0', style({opacity: 1})), transition('0 => 1', animate('200ms ease-in')), transition('1 => 0', animate('200ms ease-out')) ])aquí está el código completo:
//our root app component import {Component, NgModule, VERSION, Output, trigger, state, style, transition, animate, } from '@angular/core' import {BrowserModule} from '@angular/platform-browser' import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @Component({ selector: 'my-app', template: ` <div class="container" [@expansionTrigger]="expanded"> <div class="constant-item"></div> <div class="fade-item" [@stateAnimation]="expanded"></div> </div> <button (click)="toggleExpandedState()">Toggle Fade</button> `, animations: [ trigger('expansionTrigger', [ state('1', style({ width: '250px' })), state('0', style({width:'160px'})), transition('0 => 1', animate('200ms ease-in')), transition('1 => 0', animate('200ms ease-out')) ]), trigger('stateAnimation', [ state('1', style({ opacity: 0 })), state('0', style({opacity: 1})), transition('0 => 1', animate('200ms ease-in')), transition('1 => 0', animate('200ms ease-out')) ]) ] }) export class App { expanded = true; toggleExpandedState() { this.expanded = !this.expanded; } constructor() { } } @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule ], declarations: [ App ], bootstrap: [ App ] }) export class AppModule {}