代码之家 › 专栏 › 技术社区 › Ado Ren

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

angular javascript

0

Ado Ren · 技术社区 · 7 年前

我试图用angular(6)复制一棵动画树,树叶在像visible这样的随机空间中移动 here

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

1 回复 | 直到 7 年前

1

user4676340 user4676340 7 年前

如果不想使用角度动画,则应使用 CSS3 keyframes .

(我不会给你上这方面的课程,只要20分钟你就能理解)。

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 */
  }
}