"show/hide" div javascript 而不是 jquery，而不是 display:none

Question

我需要show/hide上下一个div，但是：

不能与 jquery 一起使用：因为 togle()、slideTogle()、fade、animate 等都使用 display:none，而我需要 div 在 DOM 中使用它 space（我会在那里处理事情）。

直到现在，我只让 divs 获得样式可见性：隐藏和阻止，通过单击一些 "Toggle" 按钮，它工作正常，但我不知道如何添加对显示有一些影响，就像 togle('slow') 一样。

我的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;
}

Answer 2

尝试：$('#chartBox').animate({opacity : 0}, 500);

"show/hide" div javascript 而不是 jquery，而不是 display:none

"show/hide" a div with javascript not jquery, and not with display:none

javascript

css

visibility

reactjs

display