点击时 div 的 CSS 过渡

Question

我正在尝试显示一个div从顶部出现并向动。我使用 CSS 过渡实现了类似的效果。但是我希望在单击按钮时发生div转换。我正在用 reactjs 编码它。

我做过这样的事情

我的分区

<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 首次出现时。

我该怎么做？

这就是我在反应中显示我的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，也许还有其他一些内容。但它通常应该是您正在寻找的。