javascript - "show/hide"带有 javascript 的 div 而不是 jquery，并且不带有显示 :none

Question

我需要上下显示/隐藏一个 div，但是:

• 它不能与 jquery 一起使用:因为 togle()、slideTogle()、fade、animate 等，它们都使用 display:none，我需要 div 在 DOM 中使用它的空间(我会在那里处理事情)。

直到现在，我只让 div 获得样式可见性:隐藏和 block ，通过单击一些“切换”按钮，它工作正常，但我不知道如何在显示上添加一些效果，比如切换( '慢') 确实如此。

我的 CSS:

.show, .show * {
    visibility: inherit  !important;
}

.hide, .hide * {
    visibility: hidden !important;
}

我的 React/js:

toggleCharts:function(){
    //$("#chartBox").toggle();
    if (this.state.className === 'hide')
        this.setState({className: 'show'});
    else
        this.setState({className: 'hide'});
}

要隐藏的 Div:

<div id="chartBox" className={this.state.className}></div>

Answer 1

保持你的 React/jQ 不变，但使用 CSS 过渡显示和隐藏你的元素，比如使用不透明度淡化:

.show {
    opacity: 1 !important;
    transition: opacity .5s;
}

.hide {
    opacity: 0 !important;
    transition: opacity .5s;
}