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: Cuando se añade una columna, tienes la opción de que el encabezado de columna y sus celdas se deslicen desde la izquierda, derecha, arriba o abajo. También hay opciones para que aparezca con fundido y deslizamiento.columnExchangingAnimationMode: Cuando se intercambia una columna, tienes la opción de que el encabezado de columna intercambiado y sus celdas se deslicen hacia la izquierda, derecha, arriba o abajo. También hay opciones para que se desvanezca y que se desvanezca y se desvanezca.columnHidingAnimationMode: Cuando una columna está oculta, tienes la opción de que el encabezado de columna y sus celdas se deslicen hacia la izquierda, derecha, arriba o abajo. También hay opciones para que se desvanezca y se desvíe y se desvanezca hacia afuera.columnMovingAnimationMode: Cuando se mueve una columna, tienes la opción de que el encabezado de columna y sus celdas se deslicen por encima.columnPropertyUpdatingAnimationMode: Cuando cambia la propiedad de una columna, tienes la opción de que esa propiedad cambie interpolando o interpolando profundamente su cambio.columnShowingAnimationMode: Cuando se añade una columna, tienes la opción de que el encabezado de columna y sus celdas se deslicen desde la izquierda, derecha, arriba o abajo. También hay opciones para que aparezca con fundido y deslizamiento.
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" />