Есть ли способ привязать угловую анимацию к структурной директиве? - PullRequest
Новая
       41

Есть ли способ привязать угловую анимацию к структурной директиве?

1 голос
/ 16 апреля 2019

Я создал простую структурную директиву 'slider' в угловом формате.

Есть ли какой-нибудь способ оживить анимацию, как я могу связать некоторую анимацию с моими личными функциями next() и prev(), чтобы, когда пользователь нажимает next или prev контент, плавно уходил в сторону, и появится новый контент или что-то в этом роде. 

import { Directive, TemplateRef, ViewContainerRef, Input, OnInit } from '@angular/core';

@Directive({
  selector: '[_slide]'
})

export class CustomSlideDirective implements OnInit {

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ){}

  private index: number = 0;
  private context: any;

  @Input('_slideFrom') items: any[];


  ngOnInit(){   
    this.context = {
      $implicit: this.items[this.index],
      next: () => this.next(),
      prev: () => this.prev(),
    }      
    this.viewContainer.createEmbeddedView(this.templateRef,this.context)
  }


  private next(){
    this.index++
    if(this.index === this.items.length)this.index = 0
    this.context.$implicit = this.items[this.index]
  }

  private prev(){
    this.index--
    if(this.index === -1)this.index = this.items.length - 1
    this.context.$implicit = this.items[this.index]
  }

}

Вот ссылка на демо-версию stackblitz

https://stackblitz.com/edit/angular-k4aeg4

...