Definir transições em CSS

1. Use as propriedades opacity e visibility junto com a propriedade transition para definir a transição em CSS
2. Use as propriedades height, opacity e overflow juntamente com a propriedade transition para definir a transição em CSS

Este artigo apresentará métodos de configuração de transição em CSS. Aprenderemos a usar a transição em opacity, height e visibility para dar efeitos de aumento e diminuição ao pairar sobre e ao pairar para fora.

Use as propriedades opacity e visibility junto com a propriedade transition para definir a transição em CSS

Não podemos usar a propriedade transition na propriedade display em CSS. Por exemplo, não podemos alterar display : none para display : block após passar o mouse (inserir o mouse) e vice-versa usando a propriedade CSS transition. Portanto, podemos usar as propriedades opacity e visibility junto com a transição para dar efeitos de fade-in e fade-out aos itens. A transição tem certas propriedades como transition-property, transition-duration, transition-timing-function e transition-delay. Também podemos usar a propriedade abreviada de transição como transition : opacity 2s linear 1s. Aqui, opacity indica transition-property, 2s indica transition-duration, linear indica transtion-timing-function e 1s indica transition-delay. Podemos usar o hover para experimentar a transition.

Por exemplo, crie um div e use as tags ul e li para fazer uma lista de três itens de lista não ordenados. Dê ao div uma borda de 1px solid black para vê-lo. Defina as propriedades de ul como opacity: 0 e visibility: hidden e transition: visibility 0s, opacity 0.6s linear. Estamos usando opacity e visibility porque, se usarmos apenas opacity: 0, os itens ainda podem ser clicáveis ​​e passáveis. Defina a propriedade de foco ul como visibility: visible e opacity: 1 de modo que os itens da lista de ul apareçam apenas enquanto você estiver pairando com algum efeito de transition.

O exemplo abaixo mostra que os itens de ul só são visíveis ao pairar. Os itens aparecem com um efeito linear em 0,6 segundos e são ocultados novamente enquanto você move o mouse para longe.

Código de exemplo:

<div>
 <ul>
 <li> Apple </li>
 <li> Banana </li>
 <li> Mango </li>
 </ul>
</div>

div {
 border : 1px solid black;
}
div > ul {
 visibility: hidden;
 opacity: 0;
 transition : visibility 0s, opacity 0.6s linear;
}
div:hover > ul {
 visibility : visible;
 opacity : 1;
}

Use as propriedades height, opacity e overflow juntamente com a propriedade transition para definir a transição em CSS

Outra alternativa para usar a transição sobre display: none e display: block poderia ser as propriedades height, overflow e opacity usadas junto com a transição. Podemos definir opacity : 0 e height : 0 para a lista para que os itens não sejam vistos. Também temos que definir overflow: hidden para que os itens não saiam de div enquanto transition-duration leva tempo. Podemos usar a propriedade abreviada transition como no primeiro método.

Por exemplo, crie um div e crie uma lista de três itens não ordenados usando as tags ul e li. Dê ao div uma borda de 1px solid black, o mesmo com o primeiro método. Defina as propriedades de ul como opacity: 0, overflow: hidden e height: 0. Defina o valor da propriedade transition como opacidade 0,6s atenuação. Defina a propriedade de flutuação ul como height: auto e opacity: 1 para que os itens da lista de ul sejam exibidos apenas enquanto você estiver pairando com algum efeito de transition.

O exemplo abaixo mostra que div está vazio e a height de div é 0px. Mas quando passamos o mouse sobre div, a lista de itens é exibida com um efeito ease-in. A opção ease-in define o início lento da transição. A propriedade height de div torna-se auto. Quando pairamos para fora do div, ele novamente fica vazio.

Código de exemplo:

<div>
 <ul>
 <li>Apple</li>
 <li>Banana</li>
 <li>Mango</li>
 </ul>
</div>

div {
 border: 1px solid black;
}
div > ul {
 opacity: 0;
 height: 0;
 overflow: hidden;
 transition: opacity 0.6s ease-in;
}
div:hover > ul {
 opacity: 1;
 height: auto;
}