单击时 div 的 CSS 过渡答案

【问题标题】：CSS transition for a div on click单击时 div 的 CSS 过渡
【发布时间】：2017-03-02 12:12:59
【问题描述】：

我试图显示一个从顶部出现并向下流动的 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,
        });

    }

【问题讨论】：

.notification_div:active 表示css仅在元素被点击时应用
是的，我知道这一点。我想在我的 div 出现时进行转换。没有点击。
你的css真的让你的div从上到下流动吗？因为改变高度不应该改变 div 的位置

标签： css reactjs css-transitions

【解决方案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，可能还需要做一些其他的事情。但它通常应该是您正在寻找的。p>

【讨论】：