Javascript 如何使用angular 6设置永久迭代

我试图用angular（6）复制一棵动画树，树叶在像visible这样的随机空间中移动

编辑，使用角度动画解决，并在动画结束时回调修改状态

模板：

  <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>

在课堂上：

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'
  }

---

希望对您有所帮助：）

如果您不想使用角度动画，您应该使用

（我不会给你上这方面的课程，只要20分钟你就能理解）

如果您想停留在角度上下文中并以另一种方式设置动画，可以使用

ViewChildren

：

@ViewChildren（'leafs'）leafs:QueryList；

使用这些视图子项，您可以在调用函数时获取元素，例如在

（单击）

最后，如果你想在一开始就把它们配对，那么你需要一个指令

@指令（{selector:'animateLeaf'}）
导出类AnimateLeafDirective实现OnInit{
叶：HtmlPanelment；
构造函数（私有el:ElementRef）{}
恩戈尼尼特（）{
this.leaf=this.el.nativeElement；
/*生动活泼*/
}
}

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'
  }