React Grid 열 애니메이션

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

React Grid Column Animations Example

Animation Properties

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

• columnAddingAnimationMode: 열이 추가될 때, 열의 헤더와 그 셀들이 왼쪽, 오른쪽, 위, 아래에서 슬라이드되어 들어오도록 선택할 수 있습니다. 또한 페이드인(fade in)과 슬라이드(슬라이드) 및 페이드인 옵션도 있습니다.
• columnExchangingAnimationMode: 열이 교환될 때, 교환된 열 헤더와 그 셀들이 좌우, 위, 아래로 미끄러질 수 있는 옵션이 있습니다. 페이드 처리와 슬라이드 및 페이드 옵션도 있습니다.
• columnHidingAnimationMode: 열이 숨겨져 있을 때, 열 헤더와 셀을 왼쪽, 오른쪽, 위, 아래로 미끄러뜨릴 수 있는 옵션이 있습니다. 페이드 아웃 옵션도 있고, 슬라이드 앤 페이드 아웃도 가능합니다.
• columnMovingAnimationMode: 열이 이동할 때, 열 헤더와 그 셀들이 이동하도록 선택할 수 있습니다.
• columnPropertyUpdatingAnimationMode: 열의 속성이 변경될 때, 그 속성 변경을 보간하거나 깊이 보간하여 애니메이션을 활성화할 수 있습니다.
• columnShowingAnimationMode: 열이 추가될 때, 열의 헤더와 그 셀들이 왼쪽, 오른쪽, 위, 아래에서 슬라이드되어 들어오도록 선택할 수 있습니다. 또한 페이드인(fade in)과 슬라이드(슬라이드) 및 페이드인 옵션도 있습니다.

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
• columnPropertyUpdatingAnimationMode