Tengo una Directive que puedo poner en los elementos que verifica la posición de desplazamiento actual del elemento en cuestión.
Se ve como esto:
@Directive({ selector: '[my-scroll-animation]' }) Siempre que la posición satisfaga un umbral determinado, quiero que el elemento aparezca en la pantalla mediante una animación. Sé que para un Component puedo adjuntar una propiedad de animations junto con algunas configuraciones en la propiedad del host para activar la animación.
Me gustaría algo como esto:
import { myScrollAnimation } from './animations'; @Directive({ selector: '[my-scroll-animation]' animations: [myScrollAnimation] // <- not possible? })¿Cómo puedo lograr esto en una Directiva?
Usando: Angular 4.0.0-rc.4
Angular 4.2 trajo muchas mejoras de animación. Uno de ellos es AnimationBuilder, que permite la construcción de animaciones programáticas.
Solo necesita inyectar AnimationBuilder en su directiva, y puede convertir cualquier AnimationMetadata en una animación funcional.
@Directive({ selector: '[zetFadeInOut]', }) export class FadeInOutDirective { player: AnimationPlayer; @Input() set show(show: boolean) { if (this.player) { this.player.destroy(); } const metadata = show ? this.fadeIn() : this.fadeOut(); const factory = this.builder.build(metadata); const player = factory.create(this.el.nativeElement); player.play(); } constructor(private builder: AnimationBuilder, private el: ElementRef) {} private fadeIn(): AnimationMetadata[] { return [ style({ opacity: 0 }), animate('400ms ease-in', style({ opacity: 1 })), ]; } private fadeOut(): AnimationMetadata[] { return [ style({ opacity: '*' }), animate('400ms ease-in', style({ opacity: 0 })), ]; } }Utilicé una pequeña solución basada en esta respuesta al problema mencionado en la respuesta de benshabatnoam.
Las directivas son en realidad solo componentes sin plantillas. Puede crear un componente que actúe de forma idéntica a una directiva utilizando un selector de atributo (p. ej.: [selector] ) y creando la plantilla: <ng-content></ng-content> .
Como resultado, puede crear un componente 'foux-directive' así:
@Component({ selector: '[fadeInAnimation]', animations: [ trigger('fadeIn', [ transition(':enter', [ style({opacity:'0'}), animate(200, style({opacity:'1'})) ]) ]) ], template: `<ng-content></ng-content>`, }) export class FadeInDirective { @HostBinding('@fadeIn') trigger = ''; }y utilícelo como lo haría con cualquier directiva:
<div fadeInAnimation> something I want to animate </div>Como mencioné en la sección de comentarios de su pregunta.
Puede tener la configuración de animación en su componente principal. Luego, la directiva simplemente agrega una clase en su host cuando satisface el umbral.
En su directiva, puede tener algo como:
@Input() classThatTriggersAnimation = "do-animation"; @HostBinding('[@nameOfAnimation]') animationTrigger = ""; // when logic is true this.animationTrigger = this.classThatTriggersAnimation;