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

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

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

Edit on CodeSandbox

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

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

  • 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>