[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.
Blazor Grid Column Animations
La Ignite UI for Blazor 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 Blazor, se activará la animación correspondiente para todas las celdas de esa columna.
Blazor 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:
<IgbDataGrid Height="100%" Width="100%"
DataSource="DataSource"
ColumnAddingAnimationMode="ColumnShowingAnimationMode.SlideFromLeft"
ColumnExchangingAnimationMode="ColumnExchangingAnimationMode.SlideToRight"
ColumnHidingAnimationMode="ColumnHidingAnimationMode.SlideToTopAndFadeOut"
ColumnMovingAnimationMode="ColumnMovingAnimationMode.SlideOver"
ColumnPropertyUpdatingAnimationMode="ColumnPropertyUpdatingAnimationMode.Interpolate"
ColumnShowingAnimationMode="ColumnShowingAnimationMode.SlideFromBottomAndFadeIn" />