ReactJS中Ant Design网格新增列时添加过渡动画方案

问题核心是条件渲染第二列时，Row布局瞬间变化导致第一列无过渡动画。解决思路是避免DOM元素的添加/删除，通过样式控制元素显示状态，并给第一列的位置变化添加过渡动画。

方案一：内联样式实现（无需额外CSS文件） #

直接在组件中通过内联样式控制过渡效果：

import React, { useState } from 'react';
import { Col, Row, Button } from 'antd';

const Page = () => {
    const [isTwoColumn, setTwoColumn] = useState(false)
    
    return (
        <Row style={{
            alignItems: 'center',
            marginBottom: 20,
            width: '100%' // 确保Row占满容器宽度
        }}>
            {/* 第一列：通过margin变化实现居中/靠左的平滑过渡 */}
            <Col 
                span={12} 
                style={{
                    transition: 'margin 0.3s ease',
                    margin: isTwoColumn ? 0 : '0 auto'
                }}
            >
                <Button onClick={() => setTwoColumn(!isTwoColumn)}> update column </Button>
            </Col>
            {/* 第二列：始终渲染，通过opacity和width控制显示/隐藏，避免DOM突变 */}
            <Col 
                sm={24} 
                lg={12} 
                style={{
                    transition: 'opacity 0.3s ease, width 0.3s ease',
                    opacity: isTwoColumn ? 1 : 0,
                    width: isTwoColumn ? 'auto' : 0,
                    overflow: 'hidden',
                    whiteSpace: 'nowrap'
                }}
            >
                {/* 第二列内容 */}
            </Col>
        </Row>
    )
}

方案二：自定义CSS类（更易维护） #

如果需要更复杂的样式，可拆分到CSS文件中：

组件代码

import React, { useState } from 'react';
import { Col, Row, Button } from 'antd';
import './ColumnTransition.css';

const Page = () => {
    const [isTwoColumn, setTwoColumn] = useState(false)
    
    return (
        <Row className="column-row">
            <Col 
                span={12} 
                className={`column-item first-col ${isTwoColumn ? 'two-column' : ''}`}
            >
                <Button onClick={() => setTwoColumn(!isTwoColumn)}> update column </Button>
            </Col>
            <Col 
                sm={24} 
                lg={12} 
                className={`column-item second-col ${isTwoColumn ? 'show' : ''}`}
            >
                {/* 第二列内容 */}
            </Col>
        </Row>
    )
}

ColumnTransition.css

.column-row {
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
}

.column-item {
    transition: all 0.3s ease;
}

.first-col {
    margin: 0 auto; /* 单列模式居中 */
}

.first-col.two-column {
    margin: 0; /* 双列模式靠左 */
}

.second-col {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.second-col.show {
    opacity: 1;
    width: auto;
}

/* 适配Antd lg断点的栅格宽度 */
@media (min-width: 992px) {
    .second-col.show {
        width: calc(50% - 12px); /* 若Row设置了gutter=24，需减去左右各12px的间距 */
    }
}

关键要点 #

1. 避免DOM增删：始终渲染第二列，通过opacity和width控制显示/隐藏，防止布局瞬间重排。
2. 过渡属性：给第一列的margin添加过渡，实现居中到靠左的平滑移动；给第二列添加opacity和width过渡，实现淡入效果。
3. 容器宽度：确保Row占满容器宽度（width:100%），否则margin:auto无法生效。

内容的提问来源于stack exchange，提问作者Dylan