Como mostrar e ocultar uma div com transição no CSS

O principal objetivo das divs é dividir uma página em diferentes seções e estilizá -las de acordo. Em comparação, o estilo de uma div é relativamente simples devido aos seus IDs e atributos. Além disso, exibir e ocultar os divs também faz parte do estilo.

Neste manual, aprenderemos o procedimento para mostrar e ocultar a div com o “transiçãoPropriedade do CSS.

Como mostrar e ocultar uma div com transição no CSS?

O CSS “transição”Propriedade facilita a alteração do valor da propriedade com base em um período específico. Pode ser um elemento flutuante ou ativo, dependendo de seu estado. Além disso, a propriedade de transição do CSS é usada para mostrar e ocultar a div em html.

Agora, vamos para a sintaxe da propriedade de transição.

Sintaxe

Há duas coisas que você precisa especificar ao criar um efeito de transição:

• Adicione um efeito a uma propriedade CSS.
• Defina a duração do efeito.

Basicamente, "transição”É uma propriedade abreviada que consiste em quatro outras propriedades, que são dadas abaixo:

Transição: Duração da transição de transição-propriedade
Dellay de transição de função de tempo de transição

Aqui está a descrição das propriedades mencionadas:

• Property de transição: É utilizado para definir a transição para qualquer propriedade CSS. Como largura, altura, opacidade e muito mais.
• duração da transição: É usado para especificar a duração da transição.
• Função de Timing de Transição: É utilizado para definir a velocidade da transição.
• Delay de transição: Especifica o tempo em que a transição começa ou atrasa.

Vamos dar um exemplo no qual mostraremos e ocultaremos a div com o “transiçãoPropriedade do CSS. Para esse fim, primeiro, criamos um “div”E um tipo de entrada“Caixa de seleção”.

Etapa 1: Criar e estilo div

Dentro da tag, adicionaremos uma etiqueta usando a tag e adicionaremos um tipo de entrada como “Caixa de seleção”. Depois disso, crie uma div e feche a tag.

Html

Mostre o div
Div

A seguir, iremos estilizar a div usando a propriedade cor de fundo e definir a cor do fundo como “RGB (238, 190, 118)”. Vamos definir a altura da div como “150px”E ajuste a borda ao redor como“10px","cume", e "RGB (6, 56, 2)”. No final, especificaremos o tamanho da fonte como “50px”.

CSS

div
Background-Color: RGB (238, 190, 118);
Altura: 150px;
borda: 10px Ridge RGB (6, 56, 2);
Size da fonte: 50px;

A saída do código descrito acima é dado abaixo. Aqui, você pode ver que a DIV e a caixa de seleção são criadas com sucesso:

Agora, vá para a próxima etapa em que escondemos e mostramos o div usando a propriedade de transição.

Etapa 2: mostre e oculta uma div com transição

Para fazer isso, definiremos o efeito de transição definindo “opacidade”, Sua duração como“2s”, E o valor da opacidade como“0”Na classe Div que criamos no CSS:

transição: opacidade 2s;
opacidade: 0;

Observação: Aplicaremos a transição em “opacidade”Propriedade para definir a transparência do elemento. Aqui, especificaremos seu valor como “0”, O que significa que quando a transição começa, a div ficará oculta por dois segundos.

Depois de definir os valores de transição, usaremos “entrada”Para acessar o tipo de entrada criado no arquivo html e definir a pseudo-classe do elemento de entrada como“:verificado”. Então, vamos acessar a div e o “+”O operador será usado para associar a caixa de seleção à DIV. Assim, quando uma operação é realizada na caixa de seleção, seu uso afetará a div. Em seguida, definiremos o valor da opacidade como “1”:

Entrada: verificado + div
Opacidade: 1

Observação: Vamos especificar o valor da opacidade como “1”, O que significa que quando a caixa de seleção estiver marcada, a div criada será mostrada. Além disso, desmarque para esconder a div

Como você pode ver, a div é mostrada e escondida usando o “transição”Propriedade e“:verificado”Elemento de pseudo-classe:

Explicamos o método para esconder e mostrar uma divisão com propriedade de transição no CSS.

Conclusão

Para mostrar e esconder uma div, o “transição”Propriedade e“:verificado”” O elemento pseudo-classe é usado de tal maneira que o valor da opacidade da div é definido como “0”, E em: verificado elemento pseudo-classe, defina a opacidade como“1”. Quando o usuário clica na caixa de seleção, a div é exibida e, quando ficar desmarcada, a div se esconde. Neste manual, descrevemos o método para ocultar e mostrar o Div usando a propriedade de transição.