Question

我尝试显示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>

CSS已应用

.notification_div {

    width: 100%;
    height: 0;
    background-color: whitesmoke;
    margin-bottom: 20px;
    border-radius: 5px;

}

.notification_div:active {

    transition: height 1s;
    height: 100%;

}

当我点击按钮时出现我的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,
        });

    }

Answer 1

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

一种方法是在单击该函数时添加另一个类，如此...（我要向div添加一个id，所以现在它是<div id="notification" className="notification_div">）

function open_notification() 
{
//    this.setState({
//        showNotification: !this.state.showNotification,
//    });
     document.getElementById("notification").className += " active";
}

.notification_div {

    width: 100%;
    height: 0;
    background-color: whitesmoke;
    margin-bottom: 20px;
    border-radius: 5px;

}

.notification_div.active {

    transition: height 1s;
    height: 100%;
    background-color: yellow;
}

html, body {
  height: 100%;
}

<div id="notification" class="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>
 
 <button type="button" onclick="open_notification()">Click Me</button>

注意：您需要在HTML中更改class到className，或者其他一些内容。但它通常应该是你正在寻找的。

点击时div的CSS转换

1 个答案: