React Animações de coluna de grade
O Ignite UI for React Data Table / Data Grid suporta Column Animation durante eventos como Column Hiding ou Column Moving. Quando Column Animation na React data grid é definida, a animação correspondente será disparada para todas as células naquela coluna.
React Grid Column Animations Example
Animation Properties
Cada propriedade de animação de coluna é listada e descrita abaixo:
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 seguir, demonstramos a implementação de cada uma das animações de coluna descritas neste tópico:
<IgrDataGrid
height="100%"
width="100%"
dataSource={this.data}
columnAddingAnimationMode="SlideToLeft"
columnExchangingAnimationMode="SlideToRight"
columnHidingAnimationMode="SlideToTopAndFadeOut"
columnMovingAnimationMode="SlideOver"
columnPropertyUpdatingAnimationMode="Interpolate"
columnShowingAnimationMode="SlideFromBottomAndFadeIn" />