Angular анимации бесконечной ошибки карусели - PullRequest
Новая
       27

Angular анимации бесконечной ошибки карусели

0 голосов
/ 30 марта 2020

Я пытаюсь воссоздать бесконечную карусель карточек с angular анимациями, и она совсем не гладкая.

Ожидаемый результат должен быть бесконечной каруселью слева от экрана, что-то похожее на https://stripe.com/en-nl/sigma cards carousel image Сейчас анимация очень грубая, и я попытался поиграть с min-width и width, чтобы сделать ее более плавной, но карты выглядят плохо, поэтому желаемое поведение состоит в том, чтобы сделать его гладким без изменения ширины карты.

Вот мой стек: https://stackblitz.com/edit/angular-yuqk5i

И код анимации: 

animations: [
trigger('card', [
  transition(':enter', [
    style({ transform: 'translateX(100%)', }),
    animate('{{ animateTiming }}',
      style({ transform: 'translateX(0)',  }))
  ],
    { params: { animateTiming: '1000ms linear'} }
    ),
  transition(':leave', [
    style({
      transform: 'translateX(0)',
      // width: '*',
      // minWidth: '*'
    }),
    animate('{{ animateTiming }}',
      style({
        transform: 'translateX(-100%)',
        // minWidth: '0px',
        // width: '0px',
        margin: '0px',
        marginTop: '*',
        padding: 0
      }))
  ],
    { params: { animateTiming: '1000ms linear'} }
    )
]),

]

html: 

 <div [@card]="{ value: ':enter', params: { animateTiming: cardAnimationTiming }}"
       class="tab-card"
       *ngFor="let card of cards; let i = index"
       [ngClass]="card.class + (card.tabIndex === tabId ? ' active-card' : '') ">
    {{ card.name }}
  </div>

TS: 

       public sub = new Subscription();

  public cardAnimationDefault = '1500ms linear'; // the animation timming will be changed to 6000ms
  public cardAnimationTiming = '1500ms linear'; // the animation timming will be changed to 6000ms
  public tabId = 0;

  public cards = [
    { name: 'TAB 1 card 1', img: '', tabIndex: 0, class: 'tab-card--1'},
    { name: 'TAB 1 card 2', img: '', tabIndex: 0, class: 'tab-card--2'},
    { name: 'TAB 1 card 3', img: '', tabIndex: 0, class: 'tab-card--3'},
    { name: 'TAB 1 card 3', img: '', tabIndex: 0, class: 'tab-card--4'},
  ];

    ngAfterViewInit(): void {
    // -->Trigger: change the first card every 1500ms
    this.sub.add(
      interval(1500).subscribe(() => {
        this.moveTheFirstCardAtTheEnd();
      })
    );
  }

 /**
   * Adds the first card at the end of the list
   */
  public moveTheFirstCardAtTheEnd() {
    const card = { ...this.cards[0]} ;
    this.cards.push(card);
    this.cards.splice(0, 1);
  }
...