Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
La transición de IU semántica es una animación que se usa para mover el contenido de la página web dentro o fuera de la vista mediante el método de transición de IU semántica.
La transición de fundido de la interfaz de usuario semántica puede hacer que el elemento de la página web aparezca o desaparezca de la vista de forma descendente y ascendente. Incluso podemos asignar una dirección específica para el desvanecimiento usando la dirección, es decir , arriba , abajo , derecha o izquierda . Para agregar una transición de fundido a cualquier div o elemento HTML en la interfaz de usuario semántica. Usamos la función .transition() con los siguientes parámetros junto con el parámetro «fade». Esto hace que el elemento se desvanezca si está fuera de la pantalla y se desvanezca si está en la pantalla.
Valor de los parámetros:
- arriba: esta propiedad se usa para atenuar la transición hacia arriba.
- abajo: Esta propiedad se usa para atenuar la transición hacia abajo.
- right: Esta propiedad se usa para atenuar la transición a la dirección correcta.
- izquierda: esta propiedad se utiliza para atenuar la transición hacia la izquierda.
Sintaxis:
$('.selector').transition('fade up');
Ejemplo 1: El siguiente ejemplo demuestra la transición de atenuación básica de la interfaz de usuario semántica en el elemento <img> .
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<center>
<h1 class="ui header green">Geeksforgeeks</h1>
<strong>Semantic UI fade transition</strong><br/>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
class="ui demo"/><br/>
<br/>
<button class="button"> Basic fade </button><br/><br/>
</center>
<script>
$('.button').click(function () {
$('.demo').transition('fade');
});
</script>
</body>
</html>
Producción:
Transición de desvanecimiento de interfaz de usuario semántica
Ejemplo 2: El siguiente ejemplo demuestra la transición de atenuación direccional de la interfaz de usuario semántica en el elemento <img>.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<center>
<h1 class="ui header green">Geeksforgeeks</h1>
<strong>Semantic UI fade transition</strong><br/>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
class="ui demo"/><br/>
<br/>
<button class="button1"> fade up </button>
<button class="button2"> fade down </button>
<button class="button3"> fade right </button>
<button class="button4"> fade left </button>
</center>
<script>
$('.button1').click(function () {
$('.demo').transition('fade up');
});
$('.button2').click(function () {
$('.demo').transition('fade down');
});
$('.button3').click(function () {
$('.demo').transition('fade left');
});
$('.button4').click(function () {
$('.demo').transition('fade right');
});
</script>
</body>
</html>
Producción:
Transición de desvanecimiento de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/modules/transition.html#fade
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA