7

基本的に、Angular (現在 4) の web-animations-api ポリフィルを使用して、要素に対して無限のアニメーションを実行したいと考えています。

基本的な非角度の例を見てみましょう:

var ball = document.getElementById('ball');

ball.animate([
  { transform: 'scale(0.5)' },
  { transform: 'scale(1)' }
], {
  duration: 1000,
  iterations: Infinity,
  direction: 'alternate',
  easing: 'ease-in-out'
});
.container {
  position: relative;
  width: 100%;
  height: 200px;
}

.ball {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid #E57373;
  background: #F06292;
  box-shadow: 0px 0px 15px #F06292;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js"></script>
<div class="container">
  <div class="ball" id="ball"><div>
</div>

それをAngularに変換するにはどうすればよいですか?

これは私がこれまでに試したことですが、一度しか機能しません:

animations: [
  trigger('scale', [
    transition('* <=> *', animate('1s ease-in-out', keyframes([
      style({ transform: 'scale(0.5)' }),
      style({ transform: 'scale(1)' })
    ]))) // How do I specify the iterations, or the direction? 
  ])
]

ElementRef を保存して上記の例のようにする代わりに、@angular/animation プラグインでそれを行う方法はありますか? または、このプラグインの目的を誤解している可能性がありますか?

前もって感謝します。

4

3 に答える 3

19

私は自分のプロジェクトで無限のアニメーションを探していました。にはこれに関するドキュメントはありませんangular.io。だから私はこの方法を試しましたが、これを達成するのに何時間もかかりました。それが他の人を助けることを願っています。最初に で定義animationしますclass。

animations: [
trigger('move', [
  state('in', style({transform: 'translateX(0)'})),
  state('out', style({transform: 'translateX(100%)'})),
  transition('in => out', animate('5s linear')),
  transition('out => in', animate('5s linear'))
]),
]

それをあなたのhtml

<div [@move]="state" (@move.done)="onEnd($event)"></div>

次に、ライフサイクルフックを設定state = 'in'して、関数でプロパティ値を更新し、コールバック関数を終了した後、プロパティ値を更新してプロパティ値をチェックします。次に、このような関数で更新する場合ngAfterViewInit()state'out'setTimeoutstate'in'stateinoutsetTimeout

export class AppComponent implements AfterViewInit {
  state = 'in';
  ngAfterViewInit() {
    setTimeout(() => {
      this.state = 'out';
    }, 0);
  }
  onEnd(event) {
    this.state = 'in';
    if (event.toState === 'in') {
      setTimeout(() => {
        this.state = 'out';
      }, 0);
    }
  }
}

ハッピーコーディング:)

于 2017-09-14T07:09:23.627 に答える
2

Angular では無限のアニメーションを実現できますが、それほど多くはありませんが、onenter および onleave アニメーションではうまく機能しています。

「mouseenter」でアニメーションがループ再生されると、「mouseleave」で停止します。

私はAngular 6を使用しています。

Angular CLI: 6.0.8 Node: 8.9.3 OS: Linux x64 Angular: 6.1.4 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-b​​rowser .. . platform-b​​rowser-dynamic, router

rxjs 6.2.2 typescript 2.7.2 webpack 4.8.3

import {
  trigger,
  state,
  style,
  animate,
  transition
} from '@angular/animations';

@Component({
  selector: 'hot-spot',
  templateUrl: './myComp.component.html',
  styleUrls: ['./myComp.component.css'],
  animations: [
    trigger('compState', [
      state('small', style({
        opacity: '0.5',
        transform: 'scale(0.8)'
      })),
      state('large', style({
        opacity: '1',
        transform: 'scale(1.2)'
      })),
      transition('small => large', animate('0.6s 100ms ease-in')),
      transition('large => small', animate('0.7s 100ms ease-out'))
    ]),
  ]
})
export class MyComponent {

  state: string = 'none';
  isEnter: boolean = false;


  onMouseEnter(evt: MouseEvent) {
    console.log('onMouseEnter()');
    this.state = 'small';
    this.isEnter = true;
  }

  onMouseLeave(evt: MouseEvent) {
    console.log('onMouseLeave()');
    this.state = 'large';
    this.isEnter = false;
  }

  onEnd(event) {
    if (this.isEnter) {
      if (event.toState === 'small') {
        this.state = 'large';
      }
      else {
        this.state = 'small';
      }
    }
  }

}

そしてHTML

<div
  (mouseenter)="onMouseEnter($event)"
  (mouseleave)="onMouseLeave($event)">

  <div>
    <div
      [@compState]="state"
      (@compState.done)="onEnd($event)">

      <button
        (click)="onSceneClick($event,data.sceneId)"
        type="button"
        class="btn btn-link" >
        <i class="fa fa-angle-double-up" style="font-size:16pt;color:red">
          <br><span style="font-size:12pt">{{data.text}}</span>
        </i>

      </button>
    </div>
  </div>
于 2018-09-03T12:23:32.060 に答える