Todos sabemos que transições são importantes para diminuir a sensação de repentinidade para o usuário e preparar o cérebro para, aos poucos, compreender a nova informação.

Porém, o  transition do CSS3 não funciona uniformemente com todos os parâmetros. Quem nunca quis que um elemento HTML em tela sumisse aos poucos?

O mais comum é utilizar o bom e velho display: none;, porém este simplesmente não funciona ao aplicar um transition. Usemos a lógica de que a passagem de um bloco para um nada não é uma transição. No CSS, uma transição inicialmente precisa ser um comando baseado em números.

Como usar o CSS para fazer a transição de um objeto sumir?

Para realizar esta ação, vamos usar um pequeno truque. Ao invés de simplesmente não mostrar o objeto, vamos desativar sua propriedade de ser manipulável com o mouse ou toque. Para isso podemos usar a propriedade pointer-events, ficando:

div{
    opacity: 1;
    transition: opacity .5s linear;
}

div.hide{
    opacity: 0;
    pointer-events: none;
}

Para fazer o objeto desaparecer vamos usar um pouco de JavaScript apenas para adicionar ou remover a classe CSS da div:

function ocultar(){
    var element = document.getElementById("idDaDiv");
          element.classList.add("hide");
}
function mostrar(){
    var element = document.getElementById("idDaDiv");
          element.classList.remove("hide");
}

Vamos testar?

Mas e se você quiser que ele também não ocupe um espaço? Pois pode ficar um buraco perturbador. Nesse caso você pode modificar a altura do elemento para poder aproveitar melhor esse espaço. Todavia, a propriedade height não é animável (talvez por possuir uma propriedade auto). Para esse caso, você precisa usar o max-height para realizar esta animação.

div {
  overflow:hidden;
  max-height: 200px;
  transition: max-height 1s ease-in-out;
}

div.hide {
  max-height: 0;
  pointer-events: none;
}

Lembre-se que para evitar que o conteúdo seja mostrado independente da div que você vai aplicar a transição, será necessário colocar a propriedade overflow como hidden. Também é importante salientar que a propriedade max-height só é animável caso você use as medidas fixas em pixels. Como ele determina apenas o tamanho máximo, não vai influenciar se você colocar um tamanho maior que o esperado, o que se torna funcional também para responsividade.

Vamos Testar?

Se acredita que essa dica de CSS é útil para mais alguém, compartilhe e curta esta página!