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. En este artículo, vamos a aprender sobre la transición de navegación.
La interfaz de usuario semántica tiene un montón de componentes para que los usuarios diseñen páginas web. Un elemento de la página puede aparecer y desaparecer de muchas maneras diferentes según los requisitos del usuario. Una transición es una animación que generalmente se usa para mover contenido dentro o fuera de la vista y puede aparecer y desaparecer como parte de una serie. Este método se utiliza para controlar la forma en que se produce la transición entre los dos estados del elemento.
Sintaxis:
$('.image').transition('browse');
Ejemplo 1: El siguiente ejemplo ilustra la transición de exploración de la interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<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 Browse Transitions</strong>
<div class="ui container">
<img class="ui image medium"
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
<br>
<button class="ui button">
Click here!!
</button>
</div>
</center>
<script>
$('button').click(function () {
$('.image').transition('browse');
})
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra la transición de exploración con una imagen colorida.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<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 Browse Transitions</strong>
<div class="ui container">
<img class="ui image medium"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220210074530/color2-300x166.jfif" />
<br>
<button class="ui button">
Click here!!
</button>
</div>
</center>
<script>
$('button').click(function () {
$('.image').transition('browse');
})
</script>
</body>
</html>
Producción:
Transición de exploración de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/transition.html#browse
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA