React 그리드 열 애니메이션

Ignite UI for React 열 숨기기 또는 열 이동과 같은 이벤트 중에 열 애니메이션을 지원합니다. React 데이터 그리드의 열 애니메이션이 설정되면 해당 열의 모든 셀에 대해 해당 애니메이션이 실행됩니다.

React Grid Column Animations Example

Animation Properties

각 열 애니메이션 속성은 아래에 나열 및 설명되어 있습니다.

• columnAddingAnimationMode: 열이 추가되면 열 머리글과 해당 셀이 왼쪽, 오른쪽, 위쪽 또는 아래쪽에서 슬라이드되도록 하는 옵션이 있습니다. 페이드 인, 슬라이드 및 페이드 인 옵션도 있습니다.
• columnExchangingAnimationMode: 열이 교환될 때 교환된 열 헤더와 해당 셀이 왼쪽, 오른쪽, 위쪽 또는 아래쪽으로 슬라이드되도록 하는 옵션이 있습니다. 페이드, 슬라이드 및 페이드 옵션도 있습니다.
• columnHidingAnimationMode: 열이 숨겨져 있으면 열 머리글과 해당 셀이 왼쪽, 오른쪽, 위쪽 또는 아래쪽으로 미끄러지도록 하는 옵션이 있습니다. 페이드 아웃, 슬라이드 및 페이드 아웃 옵션도 있습니다.
• columnMovingAnimationMode: 열이 이동되면 열 머리글과 해당 셀이 미끄러지도록 하는 옵션이 있습니다.
• columnPropertyUpdatingAnimationMode: 열의 속성이 변경되면 해당 변경 사항을 보간하거나 심층적으로 보간하여 해당 속성 변경 내용을 애니메이션화할 수 있는 옵션이 있습니다.
• columnShowingAnimationMode: 열이 추가되면 열 머리글과 해당 셀이 왼쪽, 오른쪽, 위쪽 또는 아래쪽에서 슬라이드되도록 하는 옵션이 있습니다. 페이드 인, 슬라이드 및 페이드 인 옵션도 있습니다.

Code Snippet

다음은 이 항목에 설명된 각 열 애니메이션의 구현을 보여줍니다.

<IgrDataGrid
    height="100%"
    width="100%"
    dataSource={this.data}
    columnAddingAnimationMode="SlideToLeft"
    columnExchangingAnimationMode="SlideToRight"
    columnHidingAnimationMode="SlideToTopAndFadeOut"
    columnMovingAnimationMode="SlideOver"
    columnPropertyUpdatingAnimationMode="Interpolate"
    columnShowingAnimationMode="SlideFromBottomAndFadeIn" />

API References

• columnAddingAnimationMode
• columnExchangingAnimationMode
• columnHidingAnimationMode
• columnMovingAnimationMode
• ColumnPropertyUpdatingAnimation