web-dev-qa-db-ja.com

Angular子コンポーネント内のアニメーションを遅延/ずらす方法

アニメーション付きの子コンポーネントがあります

child.component.ts

@Component({
  selector: 'child',
  animations:[
    // animations
   ]
})
export class ChildComponent { ... }

そして、htmlに2つの子コンポーネントがある親コンポーネント

parent.component.hmtl.ts

...
<child></child>
<child></child>
...

Stackblitzの例

私が達成したいのは、親コンポーネントの子コンポーネントのアニメーションをずらすことです。したがって、2番目の子コンポーネントはX秒後にアニメーションを開始する必要があります。

animateChild（） はうまくいくように聞こえますが、どうすれば使用できるのかわかりません。それは正しい解決策ですか？もしそうなら、例は本当に役に立ちます。

前もって感謝します

[〜＃〜] edit [〜＃〜]：この場合、animateChild（）は機能しないようです。どうやら、それは親コンポーネントで定義されているアニメーションでのみ機能します。

EDIT2：子コンポーネント内のアニメーションに遅延を追加することにより、回避策があるかもしれません。

child.component.ts

@Component({
  selector: 'child',
  animations:[
    animate(x),
    // animations
   ]
})
export class ChildComponent { ... }

Xは、子コンポーネントごとに増加する変数です。この回避策は私にはちょっと厄介に見えます

EDIT3：これまでの回答は多かれ少なかれ、2番目の編集で言及したソリューションです。それらは機能しますが、私はそれらを回避策と見なします。

親コンポーネントのみが関係するソリューションを探しているので、子コンポーネントは この非機能的な例のようにとどまる必要があります

angularangular-animations
16
Flyii

angularアニメーション機能のドキュメントに従って。

2番目の引数delayは、durationと同じ構文です。例えば：

100ミリ秒待ってから200ミリ秒実行します： '0.2s 100ms'

全文 ここ

したがって、私たちの目標は次のような2番目のパラメーターを渡すことです

animate('2000ms {{delay}}ms'

最初に、入力パラメーターを子コンポーネントに追加して、親コンポーネントからの入力値を受け入れることができるようにします。

export class ChildComponent implements OnInit {
  @Input() delay: number = 0;
  constructor() { }    
}

次に、親コンポーネントからパラメーター値を渡します

<p>child1</p>
<app-child [delay]="0"></app-child>

<p>child2</p>
<app-child [delay]="1000"></app-child>
<p>child2 should have a delay</p>

子コンポーネントで、このパラメーターをアニメーショントリガーに渡して、次のようにする必要があります。

<p [@childAnimation]="{value:'',params:{delay:delay}}">
    IIIIIIIIIIIIIIIIII
</p>

最後に、このパラメータ値をサポートするようにアニメーションを変更できます

animations: [
    trigger('childAnimation', [
      transition(':enter', [
        animate('2000ms {{delay}}ms', style({ transform: 'translateX(80%)' })),
        animate('2000ms', style({ transform: 'translateX(0)' })),
      ], { params: { delay: 0 } })
    ])
  ]

すべてが順調に進んだので、今は入力までの作業遅延が必要です。

ここでデモをチェックしてください

7
Just code

これらは唯一のオプションではありませんが、私が知っているオプションです。 Angular 7互換。

Working Stackblitz Demo

オプション1：ホストのバインドと状態

子コンポーネント内で、アニメーションの状態をホストバインディングとして宣言します。

@HostBinding('@animationState') animstate : string = 'preanimationstate';

次に、子コンポーネント内で通常の入力を使用して遅延を取得します。

@Input('delay') delay : number;

次のように遅延を渡します：

<child-component [delay]="500"></child-component>

したがって、OnInitではタイムアウトを使用できます。

let self = this;
window.setTimeout(function () {
    self.animstate = 'newstate';
}, self.delay);

理由：

アニメの子供もあなたの節約の恵みのようですが、この方法も非常に簡単で簡単です。それが役に立てば幸い。

オプション2：アニメーションをHostComponentに移動して手動で状態を適用する

child.component.tsからにアニメーション定義を移動することもできます（状態と遷移を使用している場合）。 ）parent.component.ts、次のような初期状態修飾子を使用してすべての子コンポーネントを開始します。

<child [@animstate]="initial"></child>>

次に、ViewChildrenを介して要素を取得します。

@ViewChildren(ChildComponent) childComponents as QueryList<ChildComponent>;

これはAfterViewInitでアクセスできます。 for/eachループとwindow.setTimeout関数を使用して、ビューの初期化後に状態を適用します。

3
Terrance00

万が一、この問題に再び遭遇した場合に備えて：両方のアニメーションを同時に再生する場合は、groupとanimateChildを使用する必要があります。基本的に、最初の投稿でリンクされているプラ​​ンカーでは、outerTransitionを次のように置き換える必要があります。

const outerTransition = transition('void => *', [
  style({opacity: 0}),
  group([
    animate(2000, style({opacity: 1})),
    query('@inner', [
      animateChild()
    ]),
  ]),
]);
0
Ismoil Shifoev