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 caída de la interfaz de usuario semántica puede hacer que el elemento de la página web caiga dentro o fuera de la vista de forma descendente y ascendente, respectivamente. Para agregar una transición de eliminación a cualquier elemento div o HTML en la interfaz de usuario semántica, usamos la función .transition() con el parámetro «soltar» . Esto hace que el elemento caiga en la vista si está fuera de la pantalla y salga de la vista si está en la pantalla.
Parámetro de transición:
- drop: Esto hace que el elemento de clase/id seleccionado aparezca o desaparezca de la vista.
Sintaxis:
$('.selector').transition('drop');
Ejemplo 1: El siguiente ejemplo demuestra la transición de eliminació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>Geeksforgeeks</h1>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
class="ui demo"/><br/>
<strong>
Semantic UI drop transition
</strong><br/><br/>
<button class="button">
Drop
</button>
</center>
<script>
$(".button").click(function () {
$(".demo").transition("drop");
});
</script>
</body>
</html>
Producción:
Producción
Ejemplo 2: El siguiente ejemplo demuestra la transición de caída básica de la interfaz de usuario semántica en el elemento de texto <div>.
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>Geeksforgeeks</h1>
<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/>
<strong>
Semantic UI drop transition
</strong><br/><br/>
<button class="button">
Drop
</button>
</center>
<script>
$(".button").click(function () {
$(".demo").transition("drop");
});
</script>
</body>
</html>
Producción:
Producción
Referencia: https://semantic-ui.com/modules/transition.html#drop
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA