Эффект затухания в компоненте при изменении дочерних компонентов - PullRequest
Новая
       36

Эффект затухания в компоненте при изменении дочерних компонентов

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

У меня есть карусель твитов, и я хочу, чтобы эффект fadeIn-fadeOut каждый раз менялся.

Моя структура выглядит следующим образом: 

+ src/app
    - tweets-container
        + content
            - icons-container
        + caption
    - ...

tweets-cointainer - это где Я хочу использовать эффект затухания, поэтому компоненты content и caption тем временем меняют свою информацию.

Мой код:

tweets-container.component.ts 

import { Component, Input, OnInit, SimpleChanges, OnDestroy } from '@angular/core';
import { ApiService } from '../api.service';
import { Tweet } from '../models/tweet';

@Component({
  selector: 'app-tweets-container',
  templateUrl: './tweets-container.component.html',
  styleUrls: ['./tweets-container.component.css']
})

export class TweetsContainerComponent implements OnInit, OnDestroy {
  @Input() tweets: Tweet[];
  @Input() count: number;
  @Input() changeInterval: number;
  carouselInterval: any;
  index: number;

  constructor(private service : ApiService) {}

  ngOnInit() {    
    this.index = 0;
    this.startCarousel();
  }

  startCarousel() {    
    this.carouselInterval = setInterval(async () => {    
      let nextIndex = this.index + this.count;

      if (nextIndex >= this.tweets.length)
        nextIndex = 0;

      this.index = nextIndex;
    }, this.changeInterval * 60 * 1000)
  }

  ngOnChanges(changes: SimpleChanges) {
    if (!changes.tweets.isFirstChange()) {
      this.index = 0;
    }
  }

  ngOnDestroy() {
    this.tweets.length = 0;
    clearInterval(this.carouselInterval);
  }
}

tweets-container.component. html

<article class="relative-left tweets-container">
  <article id="tweet1" class="relative-left tweets">
    <app-content [tweet]="tweets[index]"></app-content>
    <app-caption [tweet]="tweets[index]"></app-caption>
  </article>
</article>

Я пытался использовать @angular/animations вот так: 

trigger('fadeInOut', [
  state('fadeIn', style({ transform: 'translateX(0)' })),
  transition(':enter', [
    style({ opacity: 0 }),
    animate('0.3s 500ms ease-in')
  ]),
  transition(':leave', [
    animate('0.3s ease-out', style({ opacity: 1 }))
  ])
])

И используя директиву [@fadeInOut] в HTML. Но, похоже, для этого нужно изменить собственный компонент, а не только его свойство @Input().

...