12

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

0

2 Respostas 2

8

Há uns tempos para cá eu criei um artigo sobre este mesmo assunto no meu Blog.
Podes fazer isso utilizando o max-height da seguinte maneira:

.box { max-height: 0; transition: max-height 2s;}
.escondido:checked + .b { max-height:100px; }

Eis um exemplo abaixo:

.escondido { display: none; }
.box { max-height: 0; width: 200px; overflow: hidden; transition: max-height 2s; }

h2 { width: 200px; background-color: lightgray; cursor: pointer; }
.b { background-color: lightgray; }

.escondido:checked + .b { display: block; max-height:100px; }
<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>

4
  • 1
    Mas ai vai cortar o texto se for maior, não?
    – Largato
    Commented 3/12/2015 às 3:37
  • sim, mas pode-se definir um max-height maior, o único problema é que ao fazer isso a transição vai ser afetada por estar agora a calcular para uma altura maior
    – Chun
    Commented 3/12/2015 às 3:41
  • 1
    Como o @Bacco comentou, a menos que eu coloque um max-height grande o suficiente pra garantir que o conteúdo nunca será maior que ele, pode ocorrer overflow... Engraçado que eu já tinha tentado isso, mas não havia funcionado, mas seu exemplo funciona. O maior problema é (isso que vc acabou de comentar... :P)
    – mgibsonbr
    Commented 3/12/2015 às 3:42
  • 2
    De todo modo, +1, pois usando um easing adequado essa solução pode ser boa o bastante na ausência de outras.
    – mgibsonbr
    Commented 3/12/2015 às 3:43
2
+50

Eu fiz uma experiência utilizando função scaleY do transform junto na transição, o efeito não é o mesmo mas "resolve" a questão do height relativo. De repente pode servir como ponto de partida para uma solução realmente definitiva.

.escondido { display: none;}
.box {  
  height:0px;
	transform: scaleY(0);
	transform-origin: top;
  
  width: 200px; overflow: auto; 	
  transition: transform 1s, height 1s;
 
  }

h2 { width: 200px; background-color: lightgray; cursor: pointer; }
.a { background-color: red; }
.b { background-color: lightgray; }


.escondido:checked + .a { display: block; transform: scaleY(1); height:100px; }
.escondido:checked + .b { display: block; transform: scaleY(1); height: 100%; }
<label for="aba1"><h2>funciona</h2></label>
<input id="aba1" class="escondido" type="checkbox">
<div class="box a"></div>

<label for="aba2"><h2>quase 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>

2
  • Muito bom! Para o efeito ficar menos "feio", é só animar também o opacity de 0 (quando a div está escondida) até 1 (quando está exibida), assim no intervalo em que o conteúdo está mais "espremido" ele também estará quase invisível. Não vou marcar como aceita pois como você mesmo disse não é uma solução definitiva, mas já que você resolveu meu maior problema (a altura relativa) a recompensa é sua! :)
    – mgibsonbr
    Commented 12/12/2015 às 10:51
  • Realmente @mgibsonbr, essa definitivamente não é solução que merece ser marcada como resposta. Agradeço muito a recompensa, trabalho há mais de 15 anos com desenvolvimento web mas fiz minha conta faz pouco tempo. Vi muitas perguntas que eu poderia ter contribuído para solução, mas não tinha o privilégio de poder comentar solicitando algum esclarecimento. Obrigado mesmo. Commented 12/12/2015 às 15:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .