Угловой 2 рендеринга пользовательского интерфейса с анимацией - PullRequest
Новая
       19

Угловой 2 рендеринга пользовательского интерфейса с анимацией

0 голосов
/ 23 января 2019

Я застрял в сценарии, где есть заголовок, который отображается в пользовательском интерфейсе с анимацией.Значение заголовка непрерывно изменяется с изменением подписки каждые 2 секунды.

При отображении заголовка анимация воспроизводится один раз.Но при каждом изменении значения в подписке анимация не воспроизводится, поскольку анимация уже воспроизводится после визуализации элемента DOM.Я использую animate.css здесь.Как анимировать заголовок при каждом изменении его значения. 

export class WebsiteContainerComponent implements OnInit {
  welcomeMessage: string;
  welcomeMessages: Array<string> = [];
  counter: number;
  sub: any;

  constructor() {
    this.welcomeMessages.push("नमस्ते");
    this.welcomeMessages.push("Welcome");
  }

  ngOnInit() {
    this.counter = 0;
    this.welcomeMessage = "Welcome";
    this.sub = Observable.interval(5000).subscribe(val => {
      this.updateMessage();
    });
  }

  updateMessage() {
    if (this.counter + 1 === this.welcomeMessages.length) {
      this.counter = 0;
    } else {
      this.counter++;
    }
    this.welcomeMessage = this.welcomeMessages[this.counter];
  }
}

<h1 class="text-center heading-level-1 animated fadeIn">{{welcomeMessage}}</h1>

1 Ответ

0 голосов
/ 29 января 2019

Используйте угловую анимацию вместо простой CSS-анимации.

Вот простой пример того, как вы это делаете (анимация, которую я использовал в этом примере, только для примера, измените ее при необходимости):

Добавьте animations decleration в вашем @Component декораторе: 

@Component({
  ...
  animations: [
    trigger('welcomeAnimation', [
      transition('* => *', [
        animate('1s', style({
          opacity: 0
        }))
      ])
    ])
  ]
})

Использование значения * => * отвечает за выполнение анимации при каждом изменении переменной welcomeMessage.

Добавьте эту анимацию в свой шаблон так: 

<h1 [@welcomeAnimation]="welcomeMessage">{{welcomeMessage}}</h1>

Оформить заказ DEMO StackBlitz в действии

...