<tr>の自動プロパティ計算での開閉のアニメーション化

Question

テーブル行は、その上の行の[詳細の表示]ボタンをクリックするまで表示されません。現在、「詳細を表示」ボタンがクリックされたときに、2番目の行を表示し、バインドされたオブジェクトのブール値プロパティを変更するために* ngIfを使用しています。私はangular2のドキュメンテーションのアニメーションページを読んで、2番目のテーブル行が見えるようになると0pxの高さ - >完全に展開された行の高さ（* px）をアニメーション化するように "collapse/uncollapse"アニメーションを実装しようとしました。

私がやりたいことに見た最も近い例は、ヒーローを高さから（* px）0pxに取り除き、滑らかに上に滑らせた滑らかなアニメーションでした。

animations: [ 
trigger('shrinkOut', [ 
    state('in', style({height: '*'})), 
    transition('* => void', [ 
    style({height: '*'}), 
    animate(250, style({height: 0})) 
    ]) 
]) 
] 

上記の状況では、これを動作させることはできません。 * ngIfと組み合わせて試してみましたが、うまくいきませんでした。 （アニメーションを追加する前のように、その行はただちに開閉します）* ngIfを取り除き、[隠された]プロパティにバインドしてみました。私はまた、* ngIfを削除し、[隠された]とだけアニメーションを持ってみましたが、それはどちらか動作しませんでした

私の第二の表の行のHTMLがどのように見える（行がちょうどオープン滞在し、閉じられることはありません。）：

<tr [@visibilityChanged]="visibility"> 
     <td colspan="8" class="details-row"> 
      ... 
     </td> 
</tr> 

私のアニメーションは、次のようになります。

trigger('visibilityChanged', [ 
    state('hidden', style({height: '*'})), 
    transition('* => void', [ 
    style({height: '*'}), 
    animate(1000, style({height: 0})) 
    ]) 
]) 

と可視性変数は、「隠れた」「示す」ことや、その逆のビューの詳細ボタンがクリックされたときから変化する成分で文字列です。

角度2のアニメーションで可能なことを達成しようとしていますか？

Answer 1

私は自分自身のためにこれで苦労しました。それから、行の高さではなくセルの高さをアニメーション化する必要があることに気付きました。行が固定された高さに留まり、行の高さのアニメーションを尊重するのではなく、行が崩壊することはありません。それは単にビューにスナップします。

ので、以下のように、それぞれのTDにごトリガーバインディングを追加します。

<tr> 
<td class="col3Destination" [@rowVisibleState]="row.isVisible">{{row.version}} 
/td> 
<td class="col4Destination" [@rowVisibleState]="row.isVisible">{{row.dataType}}</td> 
</tr> 

（唯一の2つのセルは、スペースを節約することが示さ）そしてここにアニメーションコンポーネントのコードです：

animations: [ 
     trigger('rowVisibleState', 
     [ 
      state('true', 
       style({ 
        height: '40px', 
        opacity: 1, 
        fontSize: '14px', 
        display: 'table-row' 
       })), 

      transition('0 => 1', [ 
       animate('500ms ease-in', keyframes([ 
        style({ display: 'table-row', offset: 0 }), 
        style({ fontSize: 0, offset: 0 }), 
        style({ height: 0, offset: 0 }), 
        style({ opacity: 0, offset: 0.0 }), 
        style({ height: '40px',fontSize: '14px', display: 'table-row', opacity: 1, offset: 1.0 }) 
       ])) 
      ]), 
      state('false', 
       style({ 
        height: '0px', 
        opacity: 0, 
        display: 'none', 
        fontSize: 0 
       })), 
      transition('1 => 0', [ 
       animate('500ms ease-out', keyframes([ 
        style({ opacity: 1, offset: 0 }), 
        style({ fontSize: '14px', offset: 0 }), 
        style({ height: '40px', offset: 0 }), 
        style({ fontSize: 0, height: 1, opacity: 0.5, offset: 0.9}), 
        style({ height: '0px', opacity: 1, display: 'none', offset: 1.0 }) 

       ])) 
      ]) 
      ]) 
    ]