Trataré de ser breve. Por alguna razón, Mi animación parece funcionar bien en el atributo de estilo ancho/opacidad pero no funciona en el atributo de altura...
la animación -
trigger('Grow', [ transition(':enter', [ // :enter is alias to 'void => *' style({height:'0'}), animate(500, style({height:'*'})) ]), transition(':leave', [ // :leave is alias to '* => void' animate(500, style({height:0})) ]) ])Cambiar la 'altura' a ancho/opacidad y la animación funciona muy bien... ¿alguien sabe dónde está el problema? No pude encontrar una respuesta relativa en ninguna parte.
un ejemplo de lo que estoy tratando de lograr es como la animación en udemy, al hacer clic en una sección, la altura div expande la visualización de todos los videos: https://www.udemy.com/meteor-react/
gracias por leer .
Actualizar - todavía no funciona...
tal vez es algo con lo que estoy animando?
<div class="animate" *ngIf="show" [@animate]> <div *ngFor="let video of section"><a>hi</a></div> </div>lo que sucede es que una vez que hago clic, se muestra div.animate (por ngif) y se llena con muchas líneas que dicen 'hola'. Quiero eso en div.animate show, para hacer la animación que especifiqué.
¡ayuda! ^^
No tiene ningún estado definido en su función trigger() .
trigger crea un activador de animación con nombre, que contiene una lista de entradas state() y transition() que se evaluarán cuando cambie la expresión enlazada al activador (la expresión es [@slideInOut]="helpMenu" en el ejemplo a continuación).
@Component({ ... animations: [ trigger('slideInOut', [ state('in', style({ overflow: 'hidden', height: '*', width: '300px' })), state('out', style({ opacity: '0', overflow: 'hidden', height: '0px', width: '0px' })), transition('in => out', animate('400ms ease-in-out')), transition('out => in', animate('400ms ease-in-out')) ]) ] }) export class AComponent implements OnInit { helpMenu: string; constructor() { } ngOnInit() { this.helpMenu = 'out'; } toggleHelpMenu(): void { this.helpMenu = this.helpMenu === 'out' ? 'in' : 'out'; } }Luego úsalo en tu vista así:
<div [@slideInOut]="helpMenu"> <h1>My Title</h1> <p>My paragraph</p> </div> <button (click)="toggleHelpMenu()">help</button>El gato de animaciones angulares funciona con la directiva *ngIf perfectamente bien.
En este momento hay una sección en los documentos oficiales que describe cómo hacerlo.
El problema en su ejemplo es que el activador de animación de la plantilla se especifica como [@animate] , pero en la declaración de animaciones del componente el activador real es Grow . Por lo tanto, el activador de plantilla debe especificarse como [@Grow] .
aplicación.componente.ts
trigger("grow", [ // Note the trigger name transition(":enter", [ // :enter is alias to 'void => *' style({ height: "0", overflow: "hidden" }), animate(500, style({ height: "*" })) ]), transition(":leave", [ // :leave is alias to '* => void' animate(500, style({ height: 0, overflow: "hidden" })) ]) ])aplicación.componente.html
<div class="test" *ngIf="show" [@grow]> <!-- Use exact same trigger name here --> <div *ngFor="let video of section"><a>hi</a></div> </div>Demostración de trabajo: stackblitz