Adding column on grid with animation in ReactJS

Question

I'm trying to add a animation after I add a column on my row in antd,

Here's my code

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

const Page = () => {
    const [isTwoColumn, setTwoColumn] = useState(false)
    
    return (
        <Row style={{
            justifyContent: 'center',
            alignItems: 'center',
            marginBottom: 20
        }}>
            <Col span={12}>
                <Button onClick={() => setTwoColumn(!isTwoColumn)}> update column </Button>
            </Col>
            { isTwoColumn && (
                <Col sm={24} lg={12}>
                    
                </Col>
            ) }
        </Row>
    )
}

As you can see in my code, the 2nd <Col> is optional and the <Row> has a style of justifyContent: 'center', so it will center my <Col> if the isTwoColumn is false because it has only 1 <Col> and its grid was 12/24, and if the isTwoColumn is true, it will move the first <Col> into the left side to add the second <Col> beside it.

The problem is it just move like a blink when I change the isTwoCloumn value to true, I want to add a animation on it that shows that the first <Col> moves to its designated location after the isTwoColumn value changes.

How can I do that?

Answer 1

You can use css transition

.row-transition {
    transition: all 0.5s ease;
}

.col-item {
    transition: all 0.5s ease;
}

<Row className="row-transition" style={{
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 20
}}>
    <Col className="col-item" span={12}>
        <Button onClick={() => setTwoColumn(!isTwoColumn)}> update column </Button>
    </Col>
    {isTwoColumn && (
        <Col className="col-item" sm={24} lg={12}>
            {/* Content of the second column */}
        </Col>
    )}
</Row>