jqueryの「表示/非表示」JavaScriptでdiv要素ではない、としない表示と：なし

Question

は、私は非表示にし、divのダウン/表示する必要がありませんが、：

• それはjQueryを使ってすることはできません。ので、 （）、toggle（）、slideTogle（）、フェード、アニメーションなど、それらはすべてdisplay：noneを使用し、DOMのスペースを使ってdivを必要とします（私はそこにあるものを処理します）。

ティル今、私は唯一のdiv要素はスタイルの可視性を得ることを行わ：いくつかの「切り替え」ボタンをclickinことで、隠されたブロックを、それは[OK]を動作しますが、私は、ディスプレイ上のいくつかの効果を追加する方法がわかりません、 togle（ '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 id="chartBox" className={this.state.className}></div> 

Answer 1

-であるとして、あなたのリアクト/ jQのをしてください、しかし、ショーと不透明度でフェードするなど、CSSトランジションで要素を非表示にする：

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

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

Answer 2

try：