Использование угловых анимаций для анимационных слов

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

Например: у меня есть список фруктов, таких как {apple, orange, banana и т. Д.}

Я хочу показать:

Мне нравится "яблоко"

после 5 секунд меняют яблоко на апельсин и агинь после апельсина 5 с бананом ... пройдите список и снова к яблоку. Как мне получить это с помощью угловой анимации?

html,css,angular,

1

Ответов: 3


1 принят

То, что вы хотите, может быть достигнуто без анимации, вам нужна только старая старая двусторонняя привязка данных и интервал от rxjs. Я пошел вперед и создал простой проект angular-cli в stackblitz, идите и посмотрите рабочий пример.

https://stackblitz.com/edit/stackoverflow-51222243

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subject, interval } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {

  fruit: string;
  fruitList: Array<string> = ['apple', 'orange', 'banana'];
  ngUnsubscribe: Subject<any> = new Subject();

  constructor() { }

  ngOnInit() {
  // init the first fruit
    this.fruit = this.fruitList[0];
    // create an interval that is going to fire every 5s
    interval(5000)
      // unsubscribe from interval when the component is destroyed, averting any memory leak
      .pipe(takeUntil(this.ngUnsubscribe))
      // subscribe to interval
      .subscribe(() => {
        // find the current fruit index in the list
        const fruitIndex = this.fruitList.findIndex((fruit: string) => fruit === this.fruit);
        // get the next fruit from the list
        const nextFruit = this.fruitList[fruitIndex + 1];
        // if next fruit is defined set displayed fruit with it
        // else if next fruit is undefined that means you reached the end of the list 
        // so set the displayed fruit with the first list item
        this.fruit = nextFruit ? nextFruit : this.fruitList[0];
      });
  }

  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }

}

0

Это был другой подход =>

В компоненте:

public wordList = ['Design', 'Apple', 'orange', 'banana' ];

и Создать метод

    spanStyle(index, delay, length) {

      if (index == 0){

        return {'animation': 'rotateWordsSecond '+ delay*length+'s linear infinite 0s' }
      }

      return {'animation': 'rotateWordsSecond '+ delay*length+'s linear infinite 0s','animation-delay.s': index*delay }

    }

В соответствующем html:

<div class="rw-words">

   <span *ngFor="let word of wordList;index as i; let l = count [ngStyle]="spanStyle(i, 3, l)">{{word}} </span>

</div>

Для стилей

.rw-words
  display: inline
  text-indent: 10px

.rw-words span
  position: absolute
  opacity: 0
  overflow: hidden
  width: 100%



@keyframes rotateWordsSecond
  0%
    opacity: 1
    animation-timing-function: ease-in
    width: 0px
  10%
    opacity: 0.3
    width: 0px
  20%
    opacity: 1
    width: 100%
  27%
    opacity: 0
    width: 100%
  100%
    opacity: 0

0

Предполагая, что вопрос о том, как оживить меняющееся слово, вот простая демонстрация :

trigger('wordUpdated', [
  transition("* => *", group([
    query(':enter', [
      style({ opacity: 0, transform: 'translateY(40%)' }),
      animate('.5s ease-out', style({ opacity: 1, transform: 'translateY(0%)' }))
    ], { optional: true }),
    query(':leave', [
      style({ opacity: 1, transform: 'translateY(0%)' }),
      animate('.5s ease-out', style({ opacity: 0, transform: 'translateY(-40%)' }))
    ], { optional: true })
  ]))
])

Шаблон:

  I like <span class="block" [@wordUpdated]="word">
    <span class="span" *ngFor="let word of [ word ]">
      {{ word }}
    </span>
  </span>

Ему также нужен некоторый CSS для размещения старых / новых слов в одной и той же позиции:

span.block {
  position: relative;
}
span.span {
  position: absolute;
  left: 0.3em;
}
HTML, CSS, угловые,
Похожие вопросы
Яндекс.Метрика