Estoy suscrito a una base de datos en tiempo real de Firebase para que cuando le envíe algo, se muestre inmediatamente en la vista sin necesidad de jQuery o ajax.
Me gustaría animar la representación de dichos elementos, de modo que cuando se agrega un nuevo elemento al DOM background-color su div es verde y se desvanece lentamente. Lo que no quiero es que todos los div de esta clase realicen esta animación al cargar.
Sé cómo hacer lo primero:
@keyframes green-fade { 0% {background: rgb(173, 235, 173);} 100% {background: none;} } .post-div { animation: green-fade 5s ease-in 1; }Pero, por supuesto, esta animación ocurre para esta clase cada vez que se procesa, incluso durante la carga.
Estoy interesado en la "vía Angular 2" para hacer esto.
Desde Angular 4.25, hay una manera más fácil de hacer esto: si desea suprimir una animación :enter en la inicialización de la vista, simplemente envuélvala con la siguiente animación:
template: ` <div [@preventInitialChildAnimations]> <div [@someAnimation]>...</div> </div> `, animations: [ trigger('preventInitialChildAnimations', [ transition(':enter', [ query(':enter', [], {optional: true}) ]) ]), ... ]La solución más fácil:
@Component({ selector: 'myComponent', template: '<div [@.disabled]="disableAnimations" [@someAnimation]="someValue">', animations: [trigger('someAnimation', [transition('* => *', [style({ transform: 'scale(1.1)' }), animate(250)])])] }) export class MyComponent implements AfterViewInit { disableAnimations: boolean = true; constructor() {} ngAfterViewInit(): void { this.disableAnimations = false; } }Referencia: https://angular.io/api/animations/trigger (desplácese hasta "deshabilitar animaciones")
Agregue un disparador que verifique el estado de un elemento cuando pasa por la red. Aquí estoy activando la animación cuando itemState es new .
trigger('itemState', [ transition('* => new', animate(5000, keyframes([ style({ backgroundColor: 'red', offset: 0 }), style({ backgroundColor: '*', offset: 1.0 }) ]))),Asigne a su disparador una referencia al estado de su elemento y configúrelo en nulo cuando finalice la animación.
<div [@itemState]="someItem.itemState" (@itemState.done)="someItem.itemState=''"> ¡Asegúrese de agregar una propiedad itemState a sus publicaciones para que pueda marcarlas como nuevas!