javascript - ReactJS/CSS: How to add CSS Animation when a Paragraph is toggled on Read more/ Read less click. The paragraph should not occupy space when hidden

Question

I have an array -

    var dataArr = [
    {
        name: "Name1",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    },
    {
        name: "Name2",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    },
    {
        name: "Name3",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    },
    {
        name: "Name4",
        description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    }
];

I have a react component in which I am adding on click event on read more/read less buttons to hide/show description. Initially, I am truncating the description string and appending the remaining string on Read more click and truncating the string when read less is clicked. I want to add animation ease-in-out 300s with display: none so that it doesn't occupy space when hidden. I read that display: none doesn't work with animation. Other answers suggested adding height:0. But is not working. I am not sure how can I add the animation when read more /read less is clicked to hide/show paragraph. It should not occupy space when the description is truncated. Below is the code -

const DataGrid = ({ data }) => {
    const truncLength = 100;

    const DataGridItem = ({
        data_name,
        data_description = ''
    }) => {
        const [isCollapse, setIsCollapse] = useState(true);
        const truncatedDescription = data_description && data_description.substring(0, truncLength);
        const fullDescription = data_description && data_description.substring(truncLength,data_description.length);
        return (
            <div>
                <div className='data-detail'>
                    <h3>{data_name}</h3>
                    {data_description && data_description !== null && (
                        <p className='data_description'>
                            {data_description.substring(0, isCollapse ? truncLength : undefined)}{isCollapse && '...'}
                            {/* <span>{truncatedDescription}{isCollapse && '...'}</span><span className={`box ${!isCollapse? 'animateDown' : 'animateUp'}`}>{!isCollapse && fullDescription}</span> */}
                            <Button
                                onClick={() => setIsCollapse((isCollapse) => !isCollapse)}
                            >
                                {isCollapse ? (
                                    <>
                                        Read more <Icon icon='down-triangle' fill='white' />
                                    </>
                                ) : (
                                    <>
                                        Read less <Icon icon='up-triangle' fill='white' />
                                    </>
                                )}
                            </Button>
                        </p>
                    )}
                </div>
            </div>
        );
    };



    return (
        <div className='-grid-wrapper'>
            {dataArr.map((data, index) => (
                <DataGridItem key={index} {...data} />
            ))}
        </div>
    );
};


export default DataGrid;

question from:https://stackoverflow.com/questions/66047023/reactjs-css-how-to-add-css-animation-when-a-paragraph-is-toggled-on-read-more

Answer 1

Waitting for answers