1

Tengo 2 Divs horizontales (no aparecen horizontales pero si, lo están), necesito ocultar el div izquierdo con transition y dejar el div derecho centrado, la idea es que al apretar un boton que esta en el medio de los dos div, se oculte el div izquierdo. . He probado escondiendo el div pero no es la idea, la idea es que tenga la transicion ocultandose.

He probado con de todo y no estoy pudiendo solucionarlo, si alguien me puede dar una mano se lo agradezco de antemano

.col {
  display: flex;
}

.izq {
  margin-top: 20px;
  min-width: 35%;
  padding: 5px;
  transition: 0.5s;
  overflow: hidden;
  transition: opacity 0.5s linear;
}

.der {
  min-width: 60%;
  max-width: 100%;
}

.ocultar {
  height: 10%;
  border-radius: 50%;
  width: 35px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div className="col">
  <div className="izq">
    <label>izquierdo</label>         
  </div>
  <div>
    <button className="ocultar">Ocultar</button>
  </div>
  <div className="der">
    <label>derecho</label>
  </div>
</div>

2 respuestas 2

1

Veo que estás usando React, por lo que puedes crear un método en la clase que agregue o quite la clase oculto al apretar el botón. Es muy simple creando un estado de showIzq y dependiendo de este estado, insertar o remover la clase que requieres. Te dejo un ejemplo funcional utilizando tu código.

class Test extends React.Component {
  state = {
    showIzq : true
}

  toggleIzq = () =>{
     this.setState({showIzq: !this.state.showIzq})
  }


  render() {
    return(
    <div className="col">
      <div className={'izq ' +(this.state.showIzq ? '':'oculto')}>
        izquierdo     
      </div>
      <div>
        <button className="ocultar" onClick={this.toggleIzq}>Ocultar</button>
      </div>
      <div className="der">
        derecho
      </div>
    </div>
    )
  }
}

ReactDOM.render(<Test />, document.getElementById('root'));
.col{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
 }
  
  div.izq, div.der{
  padding: 10px 30px;
  background: #1E90FF;
  }
  
  .izq {
    transition: 0.8s;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.5s linear;
  }
  
  .oculto{
  opacity: 0;
  }
  
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.2/umd/react-dom.production.min.js"></script>

<div id="root"></div>

0

podrias hacer algo como esto

<div class='movimiento'>
 .movimiento{
  height:500px;
  width:500px;
  background:red;
  animation: prueba 3s forwards;

  }


@keyframes prueba{
  50%{transform:translateX(-50%)}
  

60%{
opacity:0;
display:none
}
}

y manipularlo con el evento click, asi desapareceras el elemento de una manera no tan brusca

1
  • 1
    As it’s currently written, your answer is unclear. Please editar to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Comunidad Bot
    Commented el 10 sept. 2021 a las 19:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.