Como vimos en un artículo anterior, con HTML5 y CSS3 se pueden realizar todo tipo de animaciones; en este artículo veremos como hacer aparecer y desaparecer elementos HTML controlando qué radio button está seleccionado.
Veamos el HTML:
<div class="container">
<p>Si pulsamos sobre el checkbox veremos como sale un div de la parte derecha de la pantalla.</p>
<p>Si volvemos a pulsar sobre él, o sobre cerrar dentro del div, el contenedor se enconderá</p>
<div>
<input type="radio" id="control-div-1" name="controlar-divs">
<label for="control-div-1">Controlar div 1</label>
<div class="container-animacion-1">
<p>div a controlar</p>
</div>
</div>
<div>
<input type="radio" id="control-div-2" name="controlar-divs">
<label for="control-div-2">Controlar div 2</label>
<div class="container-animacion-2">
<p>div a controlar</p>
</div>
</div>
<div>
<input type="radio" id="control-div-3" name="controlar-divs">
<label for="control-div-3">Controlar div 3</label>
<div class="container-animacion-3">
<p>div a controlar</p>
</div>
</div>
</div>
Este caso creamos los radios con el mismo «name» ya que queremos que sólo pueda estar activa una opción.
Cada label y radio tiene justo debajo su correspondiente contenedor a controlar. Este contenedor tiene que ser hermano o hijo del input type radio.
Para efectos más complejos, los radios se pueden sacar fuera y poner donde se requieran o incluso ocultarlos. El único requisito para que funcione es que los contenedores o elemntos a controlar sean o hermanos o hijos de los radios.
Veamos el CSS:
.container-animacion-1{
position: fixed;
width: 150px;
top:0;
right: -160px;
bottom: 0;
background: orange;
transition:0.2s ease;
}
.container-animacion-2{
position: fixed;
width: 150px;
top:0;
right: -160px;
bottom: 0;
background: blue;
transition:0.2s ease;
}
.container-animacion-3{
position: fixed;
width: 150px;
top:0;
right: -160px;
bottom: 0;
background: green;
transition:0.2s ease;
}
#control-div-1:checked ~ .container-animacion-1{
right: 0
}
#control-div-2:checked ~ .container-animacion-2{
right: 0
}
#control-div-3:checked ~ .container-animacion-3{
right: 0
}
Simplemente le damos estilos a los contenedores y lo ubicamos fuera de la pantalla. Simplemente luego se controla qué radio está checked, y le damos un «right:0» para que se posicione a la derecha de pantalla.
Los selectores que se suelen utilizar (sin ellos no funciona) son:
- ~ : hermano
- > : Hijo
Os dejo aquí la demostración, y una implementación en un proyecto real.
En este proyecto real, los radio están ocultos y jugamos con los label; le damos diferente apariencia dependiendo de qué radio está checked. A parte de esto, controlamos qué información mostrar dependiende de qué año (label/radio) esté seleccionado.
