Tengo un componente de formulario que tiene campos, algunos campos que quiero animar cuando aparecen en el formulario, pero no todos los campos.
<div *ngFor="let field of form.Fields"> <div [ngSwitch]="field.Type" [@slideOut]> <!-- more field stuff --> </div> </div> Con otros atributos puedo hacer algo como esto [attr.required]="field.Required" Pero [attr.@slideOut] no parece funcionar.
Idealmente, me gustaría tener una propiedad de animación en mi campo para poder pasar animaciones como esta [@field.Animation] pero no puedo encontrar ninguna documentación sobre cómo haría algo como esto. ¿Algunas ideas?
Para habilitar o deshabilitar condicionalmente un disparador de animación, use [@.disabled] como se documenta en https://angular.io/api/animations/trigger#disabling-animations
Tomando el ejemplo en el OP, si cada campo tiene una propiedad 'requerida' con un valor booleano y solo se debe aplicar una animación donde esto sea cierto, el código podría ser:
<div *ngFor="let field of form.Fields"> <div [@slideOut] [@.disabled]="!field.required"> <!-- more field stuff --> </div> </div>Vale la pena decir que el uso de [@.disabled] en un componente también deshabilitará las animaciones en cualquier componente secundario, por ejemplo, la apariencia de un menú de materiales ya no estará animada.
Cuando sea necesario, esto se puede evitar utilizando en su lugar un condicional para establecer la duración de la animación en la animación principal en 0, lo que elimina (visualmente) la animación, sin afectar a ningún componente secundario.
Modelo:
<div *ngFor="let field of form.Fields"> <div [@slideOut]="field.required ? {value:'', params:{duration : 200}} : {value:'', params:{duration : 0}}"> <!-- more field stuff --> </div> </div>Animación:
trigger('slideOut', [ transition(':enter', [ style({ opacity: '0' }), animate('{{duration}}ms cubic-bezier(0.4, 0.0, 0.2, 1)'), style({ opacity: '1' }) ]) ])Me encontré con un problema similar y descubrí que debe adoptar un enfoque ligeramente diferente.
En Angular, las animaciones están vinculadas al estado. Entonces, en lugar de definir un disparador diferente para su animación en su HTML, desea definir varios estados que su disparador puede observar en su clase de componente. Y en lugar de activar animaciones directamente desde un método, establece el estado del objeto al que está vinculada una animación.
Entonces, por ejemplo, podría definir lo siguiente en el decorador de componentes después de importar los módulos necesarios.
@Component({ selector: 'app-some-animated', templateUrl: './some.component.html', styleUrls: ['./some-animated.component.scss'], animations: [ trigger('flyInOut', [ transition("void => fly", [ animate(300, keyframes([ style({transform: 'translateX(100%)', opacity: 0}), style({transform: 'translateX(0)', opacity: 1}) ])) ] ) ]), trigger('flyInOut', [ transition("void => fade", [ animate(300, keyframes([ style({opacity: 0}), style({opacity: 1}) ])) ] ) ]) ] })En este caso, estoy haciendo que las animaciones sucedan tan pronto como se crea una instancia del elemento. Y en el método ngOnInit() estoy configurando this.watchMe para "volar" o "desvanecerse".
En el html, adjunto el disparador flyInOut así:
<div [@flyInOut]="watchMe"> Some content... </div>En su caso, probablemente desee agregar el estado requerido a sus objetos de campo o como una condición iterable desde su * ngFor.
Este artículo de Coursetro tiene una buena explicación y también un video.