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 deslizamiento de la interfaz de usuario semántica puede hacer que el elemento de la página web se deslice a la vista desde una dirección determinada, es decir, hacia arriba, hacia abajo, hacia la derecha o hacia la izquierda. Para agregar una transición de diapositiva a cualquier div o elemento HTML en la interfaz de usuario semántica, usamos la función .transition() con el parámetro «deslizar hacia arriba/abajo/izquierda/derecha». Esto hace que el elemento se deslice hacia adentro si está fuera de la pantalla y hacia afuera si está en la pantalla.
Sintaxis:
$('.selector').transition('slide up/down/left/right');
Ejemplo 1: El siguiente ejemplo demuestra la transición de diapositivas de la interfaz de usuario semántica en el elemento h1.
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>
<style>
.demo{
height: 500px;
width: 500px;
margin-top: 50px;
background-color: green;
color: white;
}
</style>
<body>
<center>
<h1 class="ui green demo">GeeksforGeeks</h1>
<strong>Semantic UI slide transition</strong><br/>
<br/>
<button class="button1"> slide up </button>
<button class="button2"> slide down </button>
<button class="button3"> slide right </button>
<button class="button4"> slide left </button>
</center>
<script>
$('.button1').click(function () {
$('.demo').transition('slide up');
});
$('.button2').click(function () {
$('.demo').transition('slide down');
});
$('.button3').click(function () {
$('.demo').transition('slide left');
});
$('.button4').click(function () {
$('.demo').transition('slide right');
});
</script>
</body>
</html>
Producción:
Transición de diapositivas de interfaz de usuario semántica
Ejemplo 2: El siguiente ejemplo demuestra la transición de diapositivas de la interfaz de usuario semántica en el elemento de imagen eligiendo la dirección al azar.
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>
<style>
.main{
margin-top: 50px;
}
</style>
<body>
<center>
<h1 class="ui green">GeeksforGeeks</h1>
<strong>Semantic UI slide transition</strong><br/>
<img src=
"https://geeksgod.com/wp-content/uploads/2021/06/GeeksforGeeks.png"
class="main"/>
<br/>
<button class="button">
Random transition
</button>
</center>
<script>
$('.button').click(function () {
let x=Math.floor(Math.random() * 3) + 1;
switch(x) {
case 1:
$('.main').transition('slide up');
break;
case 2:
$('.main').transition('slide down');
break;
case 3:
$('.main').transition('slide left');
break;
case 4:
$('.main').transition('slide right');
break;
default:
$('.main').transition('slide up');
}
});
</script>
</body>
</html>
Producción:
Transición de diapositivas de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/transition.html#slide
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA