"mostrar / ocultar" un div con javascript, no jquery, y no con display: none

3

Necesito mostrar / ocultar un div, pero:

  • No puede ser con jquery: porque, togle (), slideTogle (), fade, animate, etc., todos usan display: none, y necesito que el div use su espacio en el DOM (estaré procesando cosas allí ).

Hasta ahora, solo hice que los divs obtuvieran la visibilidad del estilo: oculto y bloqueado, al hacer clic en algún botón "Alternar", funciona bien, pero no sé cómo agregar algún efecto en la pantalla, como alternar ('lento' ) lo hace.

Mi CSS:

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

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

Mi React / js:

toggleCharts:function(){
    //$("#chartBox").toggle();
    if (this.state.className === 'hide')
        this.setState({className: 'show'});
    else
        this.setState({className: 'hide'});
}

El Div para esconderse:

<div id="chartBox" className={this.state.className}></div>
3

Mantenga su React / jQ como está, pero muestre y oculte sus elementos con transiciones CSS, como el desvanecimiento con opacidad:

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

.hide {
    opacity: 0 !important;
    transition: opacity .5s;
}
7
  • Estaba intentando algo así, veamos. 22 dic '16 a las 19:07
  • Funciona 99% bien, excepto por una razón, uno de los elementos secundarios del div ahora es de color negro, pero tendré que comprobar por qué. Déjame probar la otra respuesta también (pero como dije, no quiero usar jquery ...) 22 dic '16 a las 19:09
  • @pmirnd ¿Es posible que el niño fuera originalmente semitransparente con opacidad? En realidad, no necesita las reglas , .show *y , .hide *porque ocultar / mostrar el elemento principal es suficiente, eso puede solucionarlo. Actualicé mi respuesta. 22 dic '16 a las 19:10
  • Ahh sí, ese elemento (es un gráfico c3.js) tiene opacidad 0, así que con .show lo estoy configurando como 1. Lo hago porque algunos elementos eran "visibilidad: visible" y necesito hacerlos TODOS como oculto ", por eso mi CSS original era: * visibilidad: oculta o heredada. Con heredar todos los elementos secundarios se vuelven ocultos o visibles 22/12/2016 a las 19:14
  • 1
    ¡Bonito! ahora funciona totalmente. Gracias tío, no sabía eso de la opacidad. 22/12/2016 a las 19:20
1

tratar : $('#chartBox').animate({opacity : 0}, 500);

2
  • Bueno, dije que no puede ser jQuery, pero gracias (no funcionó) 22/12/2016 a las 19:11
  • sí, pero su problema fue display: none, en este caso, la propiedad de visualización no se toca, solo se cambia la opacidad
    Taki
    22/12/2016 a las 19:19