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

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 div con transición en CSS?

El CSS” transición ” hace que sea fácil cambiar el valor de la propiedad en función de un período específico. Puede ser un elemento flotante o activo, según su estado. Además, la propiedad de transición de CSS se usa 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:

• Agregue un efecto a una propiedad CSS.
• Establece 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:

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, alto, 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 temporización de transición: Se utiliza para establecer la velocidad de la transición.
• transición-retraso: Especifica el momento en que la transición comienza o se retrasa.

Tomemos un ejemplo en el que mostraremos y ocultaremos el div con el ' transición ” propiedad de CSS. Para ello, en primer lugar, creamos un “ división ” y un tipo de entrada “ caja ”.

Paso 1: crear y aplicar estilo a la división

Dentro de la etiqueta

HTML

De ahora en adelante, diseñaremos el div usando la propiedad background-color 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 fuente como ' 50px ”.

CSS

El resultado del código descrito anteriormente se muestra a continuación. Aquí, puede ver que el div y la casilla de verificación se crearon correctamente:

Ahora, pase al siguiente paso en el que ocultamos y mostramos el div usando la propiedad de transición.

Paso 2: mostrar y ocultar un div con transición

Para ello, 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 que creamos en el CSS:

Nota: Aplicaremos la transición en “ opacidad ” propiedad 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 configurar los valores de transición, usaremos “ aporte ” para acceder al tipo de entrada creado en el archivo HTML y establecer la pseudoclase del elemento de entrada como “ :comprobado ”. Luego, accederemos al div creado, y al “ + Se usará el operador ” 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á al div. A continuación, estableceremos el valor de opacidad como “ 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, desmárcalo para ocultar el div.

Como puede ver, el div se muestra y se oculta usando el ' transición ” propiedad y “ :comprobado ” elemento de pseudoclase:

Hemos explicado el método para ocultar 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 pseudoclase se usa de tal manera que el valor de la opacidad de div se establece como ' 0 ”, y en: elemento de pseudoclase verificado, establezca la opacidad como “ 1 ”. Cuando el usuario haga clic en la casilla de verificación, se mostrará el div y, cuando se desmarque, se ocultará. En este manual, hemos descrito el método para ocultar y mostrar div usando la propiedad de transición.