“显示/隐藏”一个带有javascript而不是jquery的div，而不是display：none

Question

我需要显示/隐藏一个 div，但是：

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

到目前为止，我只让 div 获得样式可见性：隐藏和阻止，通过单击一些“切换”按钮，它可以正常工作，但我不知道如何在显示上添加一些效果，例如切换（ 'slow') 会。

我的 CSS：

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

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

我的反应/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);