Как установить постоянные итерации с угловым 6

Question

Я пытаюсь воспроизвести с помощью angular (6) анимированное дерево с листами, движущимися в рандомизированных пространствах, таких как видимые здесь

РЕДАКТИРОВАТЬ, Решено с угловыми анимациями и обратным вызовом, когдазаканчивается анимация, которая изменяет состояние.

Шаблон:

  <span *ngFor="let leaf of animatedLeafs" 
  [ngStyle] = "{
    'height.px': leaf.height,
    'width.px': leaf.height
  }"
  [@animateLeaf] = "{
    value: statusState,
    params: {
      top: leaf.top,
      left: leaf.left,
      angle: leaf.angle,
      topDir: leaf.topDir,
      leftDir: leaf.leftDir,
      angleDir: leaf.angleDir
    }}"
  (@animateLeaf.done)="loopAnimation($event)"
  class="leaf-icon">
  </span>

анимации компонентов:

animations: [
    trigger('animateLeaf', [
      state('start-state', style({
        transform: `translate3d({{left}}px, {{top}}px, 0) rotate({{angle}}deg)`
      }), {params: {height: 0, left: 0, top: 0, angle: 0}}),
      state('loop-state', style({
        transform: `translate3d({{leftDir}}px, {{topDir}}px, 0) rotate({{angleDir}}deg)`
      }), {params: {height: 0, leftDir: 0, topDir: 0, angleDir: 0}}),
      transition('loop-state=>start-state', animate('3s ease-in-out')),
      transition('start-state=>loop-state', animate('3s ease-in-out'))
    ])
  ]

А в классе:

export class AnimatedTreeComponent implements OnInit {
  statusState = 'start-state';

  constructor() {
  }
  loopAnimation(event) {
    console.log(event.toState);
    this.statusState = event.toState === "loop-state" ? "start-state" : "loop-state" 
  }
  ngOnInit() {
    this.createLeafs()
    this.statusState = 'loop-state'
  }

Надеюсь, это поможет некоторым:)

Answer 1

Если вы не хотите использовать угловую анимацию, вы должны использовать CSS3 keyframes.

(я не даю вам курс по этому вопросу, с 20 минутами вы можете понять это).

Если вы хотите остаться в контексте Angular и анимировать по-другому, вы можете использовать ViewChildren:

<span *ngFor="let leaf of leafs" #leafs></span>

@ViewChildren('leafs') leafs: QueryList<ElementRef<HTMLSpanElement>>;

С этими дочерними представлениями вы можете получитьэлемент при вызове функции, например, на (click).

И, наконец, если вы хотите привести их в соответствие с самого начала, вам понадобится директива.

<span *ngFor="let leaf of leafs" animateLeaf></span>

@Directive({ selector: 'animateLeaf' })
export class AnimateLeafDirective implements OnInit {
  leaf: HTMLSpanElement;

  constructor(private el: ElementRef<HTMLSpanElement>) {}

  ngOnInit() {
    this.leaf = this.el.nativeElement;
    /* animate */
  }
}