单击div时的CSS转换

我试图显示一个div，它从顶部显示并向下流动。我使用CSS转换实现了类似的效果。但我希望在单击按钮时发生div转换。我正在用reactjs编写代码

我做过类似的事情

我的div

<div className="notification_div">

                <span className="small_font notification_header">Notifications</span>

                <div className="notification_item_div">
                    <span className="notification_item">Test Notification</span>
                </div>

                <div className="notification_item_div">
                    <span className="notification_item">Test Notification</span>
                </div>

                <div className="notification_item_div">
                    <span className="notification_item">Test Notification</span>
                </div>

 </div>

当我单击按钮时，我的div就会出现。只有当我单击div时，转换才会开始。我希望转换在div第一次出现时发生

我该怎么做

这就是我在reactjs中显示div的方式

class App extends Component {


    constructor(props) {
        super(props);

        this.state = {
            showNotification: false,
        };


            this.open_notification = this.open_notification.bind(this);
    }

    open_notification() {

        this.setState({
            showNotification: !this.state.showNotification,
        });

    }

---

不管你想做什么，它都会遵循以下逻辑

一种方法是在单击函数时添加另一个类，如。。。（我将向div添加一个id，现在它是

）

函数打开通知（）
{
//这是我的国家({
//showNotification:！this.state.showNotification，
//    });
document.getElementById（“通知”）.className+=“活动”；
}

.notification\u div{
宽度：100%；
身高：0；
背景色：白烟；
边缘底部：20px；
边界半径：5px；
}
.notification_div.active{
过渡：高度1s；
身高：100%；
背景颜色：黄色；
}
html，正文{
身高：100%；
}

通知
测试通知
测试通知
测试通知
单击我

.notification\u div:active

表示css仅在我知道的情况下单击元素时应用。我想在我的div出现时进行转换。未单击。您的css是否确实使您的div从上到下流动？因为改变高度不应该改变div的位置

class App extends Component {


    constructor(props) {
        super(props);

        this.state = {
            showNotification: false,
        };


            this.open_notification = this.open_notification.bind(this);
    }

    open_notification() {

        this.setState({
            showNotification: !this.state.showNotification,
        });

    }