«показать/скрыть» а ДИВ с JavaScript не JQuery, а не с дисплеем: нет

Question

Мне нужно, чтобы показать/скрыть вверх и вниз DIV, но:

• Это не может быть с JQuery: потому что , togle(), slideTogle(), fade, animate и т. д., все они используют display: none, и мне нужен div, используя это пространство в DOM (я буду разбираться там).

Til now, я только сделал, что divs получают видимость стиля: скрыты и блокируются, щелкнув какую-нибудь кнопку «Toggle», она работает нормально, но я не знаю, как добавить какой-то эффект на дисплей, например togle («slow»).

Мой CSS:

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

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

Моя React/ЯШ:

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