[!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

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

    Blazor Grid Column Animations Example

    Animation Properties

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

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

    Code Snippet

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

    <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" />

    API References