React Grid 열 애니메이션
Ignite UI for React 열 숨기기 또는 열 이동과 같은 이벤트 중에 열 애니메이션을 지원합니다. React 데이터 그리드에서 열 애니메이션이 설정되면 해당 열의 모든 셀에 대해 해당 애니메이션이 실행됩니다.
React Grid Column Animations Example
Animation Properties
각 열 애니메이션 속성은 아래에 나열 및 설명되어 있습니다.
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
다음은 이 항목에 설명된 각 열 애니메이션의 구현을 보여줍니다.
<IgrDataGrid
height="100%"
width="100%"
dataSource={this.data}
columnAddingAnimationMode="SlideToLeft"
columnExchangingAnimationMode="SlideToRight"
columnHidingAnimationMode="SlideToTopAndFadeOut"
columnMovingAnimationMode="SlideOver"
columnPropertyUpdatingAnimationMode="Interpolate"
columnShowingAnimationMode="SlideFromBottomAndFadeIn" />