如何在React中的条件渲染内容上添加过渡平滑效果？

Question

我希望card-wrapper div在鼠标没有悬停时呈现某些内容，而在鼠标悬停时呈现其他内容。但是，css transition：0.8s不适用于卡片包装机或其内容。我可以知道当onMouseEnter和onMouseLeave时如何使内容（卡百分比，卡金额，p按钮）淡入淡出吗？非常感谢！

import React, { Component } from 'react';



class CardOverview extends Component {
    constructor(props) {
        super(props);
        this.state = {
            hover: false
        }
    }


    render() {

        return (


            <div className="card-container" key={this.props.card.id} onMouseEnter={() => this.setState({ hover: true })} onMouseLeave={() => this.setState({ hover: false })} >

                {!this.state.hover &&
                    <div className="card-wrapper" >
                        <div className="card-percentage">
                            <div className="p1">50%</div>
                            <div className="p2">Percentage</div>
                       </div>

                        <div className="card-amount">
                            <div className="p1">30000</div>
                            <div className="p2">Amount</div>
                        </div>
                    </div>
                }

                {this.state.hover &&
                    <div className="card-wrapper" >
                        <button>View</button>
                    </div>
                }


            </div>

        )
    }
}
export default CardOverview;