Anglarアニメーションの実現の2つの方法とショッピングカートのアニメーションのインスタンスコードを追加します。

前言
先端アプリケーションでは、アニメーションは一般的なシーンです。一連のアニメライブラリを使って、やっと自分で一つのアニメを実現する必要があります。今回のアニメはアングラーフレームに基づいています。私の場面はショッピングカートを追加するようなアニメです。このシーンでは、二つのアニメが必要です。一つはショッピングカートの数が増えたアニメで、一つはページをたたむアニメです。
実現する過程で、私は2つの異なるAnglarアニメーションの方式を採用しました。

Type Scriptを使ってアニメーションを制御する

@Componentのanimations

を使用します。
アニメ基礎
Anglar公式サイトの例のように、Anglarアプリケーションにアニメーションを追加するのは比較的簡単なことです。以下は公式サイトの例です。

@Component({
 selector: 'app-hero-list-basic',
 template: `
 <ul>
 <li *ngFor="let hero of heroes"
  [@heroState]="hero.state"
  (click)="hero.toggleState()">
 {{hero.name}}
 </li>
 </ul>
 `,
 styleUrls: ['./hero-list.component.css'],
 animations: [
 trigger('heroState', [
 state('inactive', style({
 backgroundColor: '#eee',
 transform: 'scale(1)'
 })),
 state('active', style({
 backgroundColor: '#cfd8dc',
 transform: 'scale(1.1)'
 })),
 transition('inactive => active', animate('100ms ease-in')),
 transition('active => inactive', animate('100ms ease-out'))
 ])
 ]
})

アニメを使うには、テンプレートの中で[@heroState]の文法を使う必要があります。ここのheroStateは@Componentの中のheroState関連のアニメーションに対応しています。

はこのトリガーでinactiveとactiveの二つの異なるstateを定義しました。つまり、テンプレートのhero.stateが変化すると、対応するstateのスタイルなどを見つけます。

はこのtriggerの中で、私達はまた二つのtransionを定義しました。つまり、私達のstateがinactive=>activeまたはactive=>inactiveの時に、後ろのアニメーションを実行します。

原理的には、これぐらいです。そして、私はアニメの旅を始めました。
ショッピングカートの数が増えました。
私のシーンにとって、このアニメを追加するのは難しくないです。ただ前の値がフェードアウトして、新しい値がフェードアウトされます。

 trigger('count', [
 transition('void => current', [
 animate(
 '400ms 150ms',
 keyframes([
  style({ opacity: 0.6, transform: 'translateY(0)', offset: 0 }),
  style({ opacity: 0.3, transform: 'translateY(-15px)', offset: 0.5 }),
  style({ opacity: 0, transform: 'translateY(-30px)', offset: 1 })
 ])
 )
 ]),
 transition('void => last', [
 animate(
 250,
 keyframes([
  style({ opacity: 0, transform: 'translateY(100%)', offset: 0 }),
  style({ opacity: 0.3, transform: 'translateY(15px)', offset: 0.5 }),
  style({ opacity: 0.8, transform: 'translateY(0)', offset: 1.0 })
 ])
 )
 ])
 ])

コードはこのように簡単で、ここでキーフレームkeyframesを使って、いくつかの簡単なアニメーション変換を行います。
ページの拡大縮小アニメーション
あとは、ページの要素をスケーリングするなどの効果が必要です。この時はAnimation Buiderを使って実現します。

 const myAnimation = this.animationBuilder.build([
 animate(
 1000,
 keyframes([
  style({ opacity: 0.8, transform: 'scale(0.8)', offset: 0.3 }),
  style({ opacity: 0.3, transform: 'scale(0.3)', offset: 0.5 }),
  style({ opacity: 0.2, transform: 'scale(0.2) translate(12000px, 8000px)', offset: 1 })
 ])
 )
 ]);

 const player = myAnimation.create(forkFormComponent);
 player.play();
 player.onDone(() => {
 const nativeElement = this.cartContainer.nativeElement;
 nativeElement.removeChild(nativeElement.childNodes[0]);
 this.renderer.setStyle(nativeElement, 'display', 'none');
 });

その前に、まずページ要素をコピーしました。

const formElement = this.formElement.nativeElement;

const forkFormComponent = this.cartContainer.nativeElement;
forkFormComponent.appendChild(formElement.cloneNode(true));

this.renderer.setStyle(forkFormComponent, 'display', 'block');
this.renderer.setStyle(forkFormComponent, 'position', 'absolute');
this.renderer.setStyle(forkFormComponent, 'top', '-300px');
this.renderer.setStyle(forkFormComponent, 'left', '0');

そうすると、ページのDOMをコピーして、ズーム効果を実現できます。
締め括りをつける
以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考となる学習価値を持っています。質問があれば、メッセージを書いて交流してください。ありがとうございます。