イオン2の角2アニメーション2

Question

アニオン2アニメ2とtypescriptでアニメーションを使用する必要があります。 問題は、アニメーションの持続時間が機能しないため、アニメーションが瞬時に行われることです。

アニメーションコード

animations: [ 
    trigger('slideInOut', [ 
     state('in', style({ 
     transform: 'translate3d(0, 0, 0)', 
     "transition-duration": "300ms" 
     })), 
     state('out', style({ 
     transform: 'translate3d(100%, 0, 0)', 
     "transition-duration": "300ms" 
     })), 
     transition('in => out', animate('800ms ease')), 
     transition('out => in', animate('800ms ease')) 
    ]), 
    ] 

注：トランジション-duration属性は、アニメーションの再生時間を強制するために私が追加されました、それが働きました。したがって、アニメーションの長さは300msであり、アニメートの方法では800msではありません。

問題は、私がそれが追加されたtransition-durationなしで動作するはずであることを知っていることですが、私のケースでは、問題は何ですか？

HTMLコード

<ion-list *ngFor="let Position of Positions" [@slideInOut]="Position.out"> 
    <ion-item> 
     <ion-avatar item-start> 
     <img> 
     </ion-avatar> 
     <h2> {{Position.Name}}</h2> 
     <button ion-button icon-only item-end clear large> 
     <ion-icon name="checkbox" color="{{Position.voted==true?'secondary':'danger'}}" ></ion-icon> 
     </button> 
    ............ 

out属性が最初に"in"に設定されているが、その後"out"に変更。

Answer 1

1）BrowserAnimationsModuleは、あなたのapp-module.tsに「インポート」として定義されていますか？

2）Safari/iOSを使用していますか？ポリフィルweb-amimations.jsが必要な場合がありますか？

有用なスレッドhereもあります。