Cómo mostrar y ocultar un divir con transición en CSS

El objetivo principal de los divs es dividir una página en diferentes secciones y diseñarlas en consecuencia. En comparación, el estilo de DIV es relativamente simple debido a sus ID y atributos. Además, mostrar y ocultar los divs también es parte del estilo.

En este manual, aprenderemos el procedimiento para mostrar y ocultar el Div con el "transición"Propiedad de CSS.

Cómo mostrar y ocultar un divir con transición en CSS?

El CSS "transición"La propiedad facilita cambiar el valor de la propiedad en función de un período específico. Puede ser un elemento flotante o activo, dependiendo de su estado. Además, la propiedad de transición de CSS se utiliza para mostrar y ocultar el DIV en HTML.

Ahora, pasemos a la sintaxis de la propiedad de transición.

Sintaxis

Hay dos cosas que debe especificar al crear un efecto de transición:

• Agregar un efecto a una propiedad CSS.
• Establecer la duración del efecto.

Básicamente, "transición"Es una propiedad abreviada que consta de otras cuatro propiedades, que se dan a continuación:

Transición: duración de transición de transición
entrega de transición de transición de transición

Aquí está la descripción de las propiedades mencionadas:

• Propiedad de transición: Se utiliza para establecer la transición a cualquier propiedad CSS. Como ancho, altura, opacidad y muchos más.
• duración de la transición: Se utiliza para especificar la duración de la transición.
• función de transición-tiempo: Se utiliza para establecer la velocidad de la transición.
• transición-retraso: Especifica el momento en que se inicia la transición o se retrasa.

Tomemos un ejemplo en el que mostraremos y esconderemos el Div con el "transición"Propiedad de CSS. Para este propósito, primero, creamos un "div"Y un tipo de entrada"caja".

Paso 1: Crear y estilo Div

Dentro de la etiqueta, agregaremos una etiqueta usando la etiqueta y agregaremos un tipo de entrada como "caja". Después de eso, cree un div y cierre la etiqueta.

Html

Muestra el Div
Div oculto

En adelante, peinaremos el DIV utilizando la propiedad de color de fondo y estableceremos el color del fondo como "RGB (238, 190, 118)". Estableceremos la altura del Div como "150px"Y ajuste el borde a su alrededor como"10px","cresta", y "RGB (6, 56, 2)". Al final, especificaremos el tamaño de la fuente como "50px".

CSS

div
Color de fondo: RGB (238, 190, 118);
Altura: 150px;
borde: 10px cresta RGB (6, 56, 2);
tamaño de fuente: 50px;

La salida del código descrito anteriormente se proporciona a continuación. Aquí, puede ver que el DIV y la casilla de verificación se crean correctamente:

Ahora, pase al siguiente paso en el que nos escondemos y mostramos el DIV usando la propiedad de transición.

Paso 2: Muestra y esconde un DIV con transición

Para hacer esto, estableceremos el efecto de transición configurando "opacidad", Su duración como"2S", Y el valor de la opacidad como"0"En la clase Div creamos en el CSS:

Transición: Opacidad 2S;
Opacidad: 0;

Nota: Aplicaremos la transición en "opacidadPropiedad para establecer la transparencia del elemento. Aquí, especificaremos su valor como "0", Lo que significa que cuando comience la transición, el DIV se ocultará durante dos segundos.

Después de establecer los valores de transición, usaremos "aporte"Para acceder al tipo de entrada creado en el archivo HTML y establecer la pseudo-clase del elemento de entrada como":comprobado". Luego, accederemos al div y el ""+El operador se utilizará para asociar la casilla de verificación con el DIV. Por lo tanto, cuando se realiza una operación en la casilla de verificación, su uso afectará el DIV. A continuación, estableceremos el valor de opacidad como "1":

Entrada: marcado + div
Opacidad: 1

Nota: Especificaremos el valor de opacidad como "1", Lo que significa que cuando se marca la casilla de verificación, se mostrará el DIV creado. Además, no lo marcará para ocultar el Div

Como puede ver, el div se muestra y se oculta usando el "transición"Propiedad y":comprobado"Elemento pseudo-clase:

Hemos explicado el método para esconder y mostrar un DIV con propiedad de transición en CSS.

Conclusión

Para mostrar y ocultar un div, el "transición"Propiedad y":comprobado"El elemento de pseudo-clase se usa de tal manera que el valor de la división se establece como"0", Y en: Elemento de pseudo-clase marcado, establece la opacidad como"1". Cuando el usuario haga clic en la casilla de verificación, se mostrará el DIV, y cuando se vuelva a controlar, el DIV se esconderá. En este manual, hemos descrito el método para esconder y mostrar Div utilizando la propiedad de transición.