使用javascript而不是jquery“显示/隐藏”div，而不使用display：none

Question

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

• 它不能与jquery：因为，togle（），slideTogle（），淡入淡出，动画等等，它们都使用display：none，我需要在DOM中使用它的div（我会在那里处理事情） ）。

直到现在，我只让div获得样式可见性：隐藏和阻止，通过点击一些“切换”按钮，它工作正常，但我不知道如何在显示器上添加一些效果，如togle（'慢' ）。

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