Neste manual, aprenderemos o procedimento para mostrar e ocultar a div com o “ transição ” propriedade do CSS.
Como mostrar e ocultar uma Div com transição em CSS?
O CSS “ transição ” 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 passar para a sintaxe da propriedade de transição.
Sintaxe
Há duas coisas que você precisa especificar ao criar um efeito de transição:
Basicamente, ' transição ” é uma propriedade abreviada que consiste em quatro outras propriedades, que são dadas abaixo:
transição : propriedade de transição duração da transiçãotransição-temporização-função transição-atraso
Aqui está a descrição das propriedades mencionadas:
- propriedade 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 tempo de transição: É utilizado para definir a velocidade da transição.
- atraso de transição: Especifica a hora em que a transição começa ou atrasa.
Vamos dar um exemplo em que vamos mostrar e ocultar a div com o “ transição ” propriedade do CSS. Para isso, primeiro, criamos um “ div ” e um tipo de entrada “ caixa de seleção ”.
Etapa 1: criar e estilizar div
Dentro da tag
HTML
>
A seguir, vamos estilizar a div usando a propriedade background-color e definir a cor do plano de 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 {cor de fundo : rgb ( 238 , 190 , 118 ) ;
altura : 150px ;
fronteira : 10px cume rgb ( 6 , 56 , dois ) ;
tamanho da fonte : 50px ;
}
A saída do código descrito acima é fornecida abaixo. Aqui, você pode ver que a div e a caixa de seleção foram criadas com sucesso:
Agora, vá para a próxima etapa em que ocultamos e mostramos a div usando a propriedade de transição.
Etapa 2: mostrar e ocultar uma div com transição
Para fazer isso, definiremos o efeito de transição definindo “ opacidade ”, sua duração como “ 2 segundos ”, e o valor da opacidade como “ 0 ” na classe div que criamos no CSS:
transição : opacidade 2 segundos ;opacidade : 0 ;
Observação: Vamos aplicar a transição em “ opacidade ” para definir a transparência do elemento. Aqui, especificaremos seu valor como “ 0 ”, o que significa que quando a transição começar, a div ficará oculta por dois segundos.
Após 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 ”. Em seguida, acessaremos a div criada, e o “ + ” será usado para associar a caixa de seleção ao div. Assim, quando uma operação é realizada na caixa de seleção, seu uso afetará a div. Em seguida, definiremos o valor de opacidade como “ 1 ”:
entrada : verificado + div {opacidade : 1
}
Observação: Vamos especificar o valor de opacidade como “ 1 ”, o que significa que quando a caixa de seleção estiver marcada, a div criada será mostrada. Além disso, desmarque-o para ocultar o div
Como você pode ver, o div é mostrado e escondido usando o “ transição ” propriedade e “ :verificado ” elemento de pseudo-classe:
Explicamos o método para ocultar e mostrar uma div com propriedade de transição em CSS.
Conclusão
Para mostrar e ocultar uma div, o “ transição ” propriedade e “ :verificado ” elemento de pseudo-classe é usado de tal forma que o valor da opacidade div é definido como “ 0 ”, e no elemento de pseudoclasse :checked, defina a opacidade como “ 1 ”. Quando o usuário clicar na caixa de seleção, a div será exibida e, quando for desmarcada, a div será ocultada. Neste manual, descrevemos o método para ocultar e mostrar div usando a propriedade de transição.