[!Note] このコントロールは非推奨であり、Grid に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータ グリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。

    Web Components グリッド列アニメーション

    Ignite UI for Web Components Data Table / Data Grid は、列の非表示や列の移動などのイベント時に列のアニメーションをサポートします。Web Components データ グリッドで Column Animation が設定されている場合、対応するアニメーションはその列のすべてのセルに対して発生します。

    Web Components グリッド列アニメーションの例

    アニメーション プロパティ

    各列のアニメーションプロパティは以下のとおりです。

    • columnAddingAnimationMode: 列を追加すると、列ヘッダーとそのセルを左、右、上、または下からスライドさせることができます。スライドやフェード インだけでなく、フェード インさせるオプションもあります。
    • columnExchangingAnimationMode: 列を交換する場合、交換した列ヘッダーとそのセルを左、右、上、または下にスライドさせることができます。スライドやフェードだけでなく、フェードさせるオプションもあります。
    • columnHidingAnimationMode: 列を非表示にすると、列ヘッダーとそのセルを左、右、上、または下からスライドさせることができます。スライドやフェード アウトだけでなく、フェード アウトさせるオプションもあります。
    • columnMovingAnimationMode: 列が移動すると、列ヘッダーとそのセルを左、右、上、または下からスライドさせることができます。
    • columnPropertyUpdatingAnimationMode: 列のプロパティが変更されると、その変更を補完または深く補完してそのプロパティの変更をアニメーションするオプションがあります。
    • columnShowingAnimationMode: 列を追加すると、列ヘッダーとそのセルを左、右、上、または下からスライドさせることができます。スライドやフェード インだけでなく、フェード インさせるオプションもあります。

    コード スニペット

    このトピックで説明されている各列アニメーションの実装を次に示します。

    <igc-data-grid id="grid"
      height="100%"
      width="100%"
      column-addingAnimation-mode="SlideToLeft"
      column-exchanging-animation-mode="SlideToRight"
      column-hiding-animation-mode="SlideToTopAndFadeOut"
      column-moving-animation-mode="SlideOver"
      column-property-updating-animation-mode="Interpolate"
      column-showing-animation-mode="SlideFromBottomAndFadeIn">
</igc-data-grid>

    API リファレンス