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

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

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

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

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

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

    コード スニペット

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

    <IgrDataGrid
    height="100%"
    width="100%"
    dataSource={this.data}
    columnAddingAnimationMode="SlideToLeft"
    columnExchangingAnimationMode="SlideToRight"
    columnHidingAnimationMode="SlideToTopAndFadeOut"
    columnMovingAnimationMode="SlideOver"
    columnPropertyUpdatingAnimationMode="Interpolate"
    columnShowingAnimationMode="SlideFromBottomAndFadeIn" />

    API リファレンス