初期状態/後状態のアニメーション

Question

初期状態で角度アニメーションを行う方法をソートしようとしています。 jQueryのバージョンでは

trigger(
    'slideHeight', 
    [ 
     state('closed', style({ 
      display: 'none', 
      height: 0 
     })), 
     state('open', style({ 
      // display: 'block', 
      height: '*' 
     })), 
     transition('* <=> *', [ 
      style({ 
       display: 'block' 
      }), 
      animate('.5s ease') 
     ]) 
    ] 
) 

、問題の要素がそれにdisplay: noneを持っている、と私はjQueryのオープンスライドことがわかり、その後、私は以下を参照してください。私はこれまでのところ、アップ/ダウンアニメーションをスライドを開発しようとしています最終要素のdisplay: block。

上記のようにdisplay: 'block'がコメントアウトされていると、期待どおりに動作しますが、ページが読み込まれると要素が完全な高さからなしになります（これはわかりますか？）。ユーザー。

私はそれをどのように設定できるのか把握しようとしています。閉じられると、最初にdisplay: blockに行き、高さアニメーションを実行し、ブロックを保持します。他の方向では、それが完了するまでブロックしたい、display: noneを追加します。

ディスプレイなしのクラスを追加しようとしましたが、アニメーションが前後のクラスを追加しないため、期待どおりに動作しませんでした。私はAngularアニメーションJSクラスとCSSクラスの組み合わせでなければならないと考えていますが、パターンを理解できません。これに対処する方法のアドバイスは素晴らしいでしょう。

Answer 1

私はあなたが望むものを得るために2つのトランジションが必要だと思います。

trigger(
    'slideHeight', 
    [ 
     state('closed', style({ 
      display: 'none', 
      height: 0 
     })), 
     state('open', style({ 
      height: '*' 
     })), 
     transition('closed => open', [style({ display: none }), animate('.5s ease')]), 
     transition('open => closed', [style({ display: 'block' }), animate('.5s ease')]) 
    ] 
)