Skip to main content
Aviso removido Chamar atenção por mgibsonbr
Fim da Recompensa com Leandro Angelo's answer escolhido por mgibsonbr
Aviso adicionado Chamar atenção por mgibsonbr
Recompensa Oferecida vale 50 pontos de reputação por mgibsonbr
Tweeted twitter.com/StackOverflowPT/status/672341095595040768
adicionou 6 caracteres ao conteúdo
Fonte Link
mgibsonbr
  • 82,6mil
  • 22
  • 186
  • 334
.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>Seção 1<for="aba1"><h2>funciona</h2></label>
<input id="aba1" class="escondido" type="checkbox">
<div class="box a"></div>

<label for="aba2"><h2>Seçãofor="aba2"><h2>não 2<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>
.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>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">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
.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>
display não é true/false
Fonte Link
mgibsonbr
  • 82,6mil
  • 22
  • 186
  • 334

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 false"escondido" pra true"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"...

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 false pra true, 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"...

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"...

Fonte Link
mgibsonbr
  • 82,6mil
  • 22
  • 186
  • 334

Como animar a exibição de elementos de tamanho dinâmico somente com CSS?

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 labels ligados a ele, e os seletores CSS de "irmãos" (+ e ~). Exemplos:

  1. 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>

  1. 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 false pra true, 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>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">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).