Question

我正在尝试在Angular4项目中使用animejs。我一直在寻找一些提示和线索如何继续这个，但几乎没有任何地方。

所以我试图沿x坐标移动框...

animejs-logo.component.ts文件：

import { Component, OnInit } from '@angular/core';
import anime from 'animejs';

@Component({
  selector: 'app-animejs-logo',
  templateUrl: './animejs-logo.component.html',
  styleUrls: ['./animejs-logo.component.scss']
})
export class AnimejsLogoComponent {
  animation = anime({
    targets: ['.box'],
    translateX: [
      { value: 500, duration: 1000 },
      { value: 0, duration: 1000 }
    ],
    duration: 2000,
    loop: true
  });

  animate() {
    console.log('play');
    this.animation.play();
  }
}

animejs-logo.component.scss：

.box {
    position: relative;
    width: 50px;
    height: 50px;
    margin: 4px;
}
.red { background-color: #f00; }
.green { background-color: #0f0; }
.blue { background-color: #00f; }

animejs-logo.component.html：

<div class="container">
    <button (click)="animate()">Play</button>
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box blue"></div>
</div>

正如你所看到的，没有什么特别或令人难以置信的。首先试试animejs ...... 可以请有人解释我的错误吗？为什么不点火？我在控制台，项目的编译中没有任何错误。

Answer 1

好的，解决了。

问题是我在生命周期的错误时刻定义了动漫对象...... 事实证明，必须渲染所有元素，然后才能定义动画。因此，所有定义都在ngAfterViewInit例如：

ngAfterViewInit() {
    this.square = anime({
        targets: '#animation_1 .animate',
        translateX: [
            { value: 250, duration: 1000 },
            { value: 0, duration: 1000 }
        ],
        duration: 2000,
        loop: false,
        autoplay: false
   });
}

角度的动画不是动画

1 个答案: