React Animaciones de columnas de cuadrícula
La Ignite UI for React admite la animación de columnas durante eventos como ocultar o mover columnas. Cuando se configura la animación de columnas en la cuadrícula de datos React, se activará la animación correspondiente para todas las celdas de esa columna.
React Grid Column Animations Example
Animation Properties
Cada propiedad de animación de columna se enumera y describe a continuación:
columnAddingAnimationMode: When a column is added, you have the option to have the column header and its cells slide in from the left, right, top, or bottom. There are also options to have it fade in as well as slide and fade in.columnExchangingAnimationMode: When a column is exchanged, you have the option to have the exchanged column header and its cells slide to the left, right, top, or bottom. There are also options to have it fade as well as slide and fade.columnHidingAnimationMode: When a column is hidden, you have the option to have the column header and its cells slide out to the left, right, top, or bottom. There are also options to have it fade out as well as slide and fade out.columnMovingAnimationMode: When a column is moved, you have the option to have the column header and its cells slide over.columnPropertyUpdatingAnimationMode: When a column's property changes, you have the option to have that property change animate by interpolating or deeply interpolating its change.columnShowingAnimationMode: When a column is added, you have the option to have the column header and its cells slide in from the left, right, top, or bottom. There are also options to have it fade in as well as slide and fade in.
Code Snippet
A continuación se demuestra la implementación de cada una de las animaciones de columna descritas en este tema:
<IgrDataGrid
height="100%"
width="100%"
dataSource={this.data}
columnAddingAnimationMode="SlideToLeft"
columnExchangingAnimationMode="SlideToRight"
columnHidingAnimationMode="SlideToTopAndFadeOut"
columnMovingAnimationMode="SlideOver"
columnPropertyUpdatingAnimationMode="Interpolate"
columnShowingAnimationMode="SlideFromBottomAndFadeIn" />