Estou construindo um site que possui algumas transições de estados usando somente CSS. Em um deles o usuário clica no cabeçalho e a div
abaixo exibe ou esconde. No outro há uma sequência de imagens e ao clicar na imagem corrente ele passa pra próxima. A técnica para ambos é semelhante: um input
escondido com um ou mais label
s ligados a ele, e os seletores CSS de "irmãos" (+
e ~
). Exemplos:
- Seções (usa checkboxes para esconder/mostrar cada seção)
.escondido { display: none; }
.box { display: none; width: 200px; height: 100px; }
.escondido:checked + .box { display: block; }
h2 { width: 200px; background-color: lightgray; cursor: pointer; }
.a { background-color: red; }
.b { background-color: blue; }
<label for="aba1"><h2>Seção 1</h2></label>
<input id="aba1" class="escondido" type="checkbox">
<div class="box a"></div>
<label for="aba2"><h2>Seção 2</h2></label>
<input id="aba2" class="escondido" type="checkbox">
<div class="box b"></div>
- Imagens (usa radio buttons para circular entre as imagens)
.escondido { display: none; }
.imagem { display:none; width: 200px; height: 100px; cursor: pointer; }
.escondido:checked + label .imagem { display: block; }
.a { background-color: red; }
.b { background-color: blue; }
.c { background-color: green; }
.d { background-color: yellow; }
.mini { display: inline-block; width: 10px; height: 10px; border-radius: 5px; }
.escondido.a:checked ~ label .mini.a { border: 2px solid black; }
.escondido.b:checked ~ label .mini.b { border: 2px solid black; }
.escondido.c:checked ~ label .mini.c { border: 2px solid black; }
.escondido.d:checked ~ label .mini.d { border: 2px solid black; }
<!-- Imagens -->
<input id="img1" class="escondido a" type="radio" name="imgs" checked>
<label for="img2"><div class="imagem a"></div></label>
<input id="img2" class="escondido b" type="radio" name="imgs">
<label for="img3"><div class="imagem b"></div></label>
<input id="img3" class="escondido c" type="radio" name="imgs">
<label for="img4"><div class="imagem c"></div></label>
<input id="img4" class="escondido d" type="radio" name="imgs">
<label for="img1"><div class="imagem d"></div></label>
<!-- Miniaturas -->
<label for="img1"><div class="imagem mini a"></div></label>
<label for="img2"><div class="imagem mini b"></div></label>
<label for="img3"><div class="imagem mini c"></div></label>
<label for="img4"><div class="imagem mini d"></div></label>
Eu gostaria agora de animar a transição entre os estados "exibido" e "ocultado". Sei que não é possível animar a propriedade display
diretamente: o jQuery por exemplo na hora de mostrar primeiro reduz o tamanho do elemento pra zero, passa o display
de "escondido" pra "exibido", então anima o tamanho do elemento de zero até seu tamanho real. Eu não posso fazer algo semelhante só com CSS, pois não dá pra dizer "primeiro faça isso, depois faça aquilo"...
Tentei evitar o display
e simplesmente colocar a altura total da div
em zero. Funcionou bem se a div
possui tamanho fixo, mas não se o tamanho é variável (ela "saltou" direto entre os tamanhos zero e máximo):
.escondido { display: none; }
.box { height: 0; width: 200px; overflow: hidden; transition: height 2s; }
h2 { width: 200px; background-color: lightgray; cursor: pointer; }
.a { background-color: red; }
.b { background-color: lightgray; }
.escondido:checked + .a { display: block; height: 100px; }
.escondido:checked + .b { display: block; height: auto; }
<label for="aba1"><h2>funciona</h2></label>
<input id="aba1" class="escondido" type="checkbox">
<div class="box a"></div>
<label for="aba2"><h2>não funciona</h2></label>
<input id="aba2" class="escondido" type="checkbox">
<div class="box b">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
(tentei também com max-height
, e funcionou igualmente na div
de tamanho fixo, mas nesse caso a de tamanho variável nem foi exibida...)
É possível fazer isso somente com CSS, sem precisar especificar um tamanho absoluto? (e sem comprometer a responsividade, i.e. se ao ajustar a largura da janela a altura da div
mudar, que continue funcionando) Que propriedades eu poderia tentar animar para criar a ilusão de "escondido/exibido" com transição suave?
Nota: no caso das imagens, a troca seria horizontal e não vertical, mas como é mais fácil lidar com imagens (pois usualmente seu tamanho é conhecido) esse caso pode ficar de fora da pergunta (mas sugestões pra esse caso também seriam muito bem vindas).