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 volteo de la interfaz de usuario semántica puede hacer que el elemento de la página web se volteé a la vista si no está en la pantalla o fuera de la vista si está en la pantalla. Para agregar una transición de giro a cualquier div o elemento HTML en la interfaz de usuario semántica, usamos la función .transition() con el parámetro «giro horizontal» o «giro vertical».
- Voltear horizontalmente: Esto voltea el elemento horizontalmente durante la transición.
- Volteo vertical: esto voltea el elemento verticalmente durante la transición.
Sintaxis:
$('.selector').transition('vertical flip');
Ejemplo 1: El siguiente ejemplo demuestra la transición horizontal y vertical 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 flip transition</strong><br/>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
class="ui demo"/><br/>
<br/>
<button class="button1"> Horizontal flip </button>
<button class="button2"> Vertical flip </button>
</center>
<script>
$('.button1').click(function () {
$('.demo').transition('horizontal flip');
});
$('.button2').click(function () {
$('.demo').transition('vertical flip');
});
</script>
</body>
</html>
Producción:
Transición de cambio de interfaz de usuario semántica
Ejemplo 2: El siguiente ejemplo demuestra la transición de inversión de la interfaz de usuario semántica en el elemento de texto <div> 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>
<style>
.demo{
height: 300px;
width: 300px;
color: white;
background-color: green;
padding: 20px;
}
</style>
</head>
<body>
<center>
<h1 class="ui header green">Geeksforgeeks</h1>
<strong>Semantic UI flip transition</strong><br/>
<div class="ui demo">
<h1>Geeksforgeeks</h1>
<br/>
<p style="text-align: justify;">
Self-Paced Course With Doubt Assistance To Learn
& Practice For Placement In Top Companies.
Data Structures And Algorithms Is The Key To
Selection In Product Based Companies.
Content Lifetime Validity. Get Certified.
Premium Video Lectures.
</p>
</div><br/>
<br/>
<button class="button"> Random flip </button>
</center>
<script>
$('.button').click(function () {
let x=Math.floor(Math.random() * 2) + 1;
switch(x) {
case 1:
$('.demo').transition('horizontal flip');
break;
case 2:
$('.demo').transition('vertical flip');
break;
default:
$('.demo').transition('horizontal flip');
}
});
</script>
</body>
</html>
Producción:
Transición de cambio de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/transition.html#flip
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA