使用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);