Cuando un componente secundario tiene una transición de animación que utiliza una consulta en filas mat-rable, ocultar el componente principal activará la animación secundaria.
Escenario de reproducción: https://codesandbox.io/s/intelligent-jasper-hzmxvy
Esto ya no sucede si declaro el fadeOut en AppComponent también.
@Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"], animations: [fadeOut()] })
Probé con otro tipo de elementos, no lo reproduje con nada más que filas de tapetes.
Como dice la documentación de Angular: https://angular.io/guide/transition-and-triggers#use-of-ngif-and-ngfor-with-enter-and-leave "Nota: los comportamientos de entrada/salida pueden ser confusos en algún momento. Como regla general, considere que cualquier elemento que Angular agregue al DOM pasa a través de la transición :enter, pero solo los elementos que Angular elimina directamente del DOM pasan a través de la transición :leave (por ejemplo, la vista de un elemento se elimina del DOM porque su elemento principal se está eliminando del DOM o la ruta de la aplicación ha cambiado, entonces el elemento no pasará a través de la transición :leave)".
En cualquier caso, esperaba que la animación infantil no se activara en absoluto.
¿Me estoy perdiendo de algo?
¡Gracias por cualquier respuesta que pueda tener!
¿Cuál es el comportamiento deseado que busca? ¿Qué le gustaría/esperaría que sucediera?
Tengo algunas ideas de por qué puede ser esto, pero nuevamente, necesitaría saber cuál es la pregunta exacta.
Puede tener que ver con el hecho de que las celdas de la tabla son el objetivo de la animación:
query("td", animate("2000ms", style({ position: "absolute" }))) O el hecho de que se usa un ng-container y esto podría no contar como un elemento principal.
A la espera de saber de ti.