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 Fly Transition.
Está equipado con componentes semánticos preconstruidos que ayudan a crear diseños receptivos utilizando HTML fácil de usar. Un elemento puede volar dentro o fuera del lienzo al hacer clic en el botón.
Este método se utiliza para controlar la forma en que se produce la transición entre los dos estados del elemento al hacer clic. Incluso podemos asignar una dirección específica para la transición de vuelo utilizando la dirección, es decir, arriba, abajo, derecha o izquierda. Para agregar una transición de vuelo 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 «volar». Esto hace que el elemento vuele.
Valor de los parámetros:
- up: esta propiedad se utiliza para establecer la transición de vuelo hacia arriba.
- down: esta propiedad se utiliza para establecer la transición de vuelo hacia abajo.
- right: esta propiedad se utiliza para establecer la transición de vuelo a la derecha.
- izquierda: esta propiedad se utiliza para establecer la transición de vuelo a la izquierda.
Sintaxis:
$('.image').transition('fly up');
Ejemplo 1: El siguiente ejemplo ilustra la transición de vuelo 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 Fly 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('fly');
})
</script>
</body>
</html>
Producción:
Transición de vuelo de interfaz de usuario semántica
Ejemplo 2: El siguiente código demuestra la transición de vuelo en la dirección «hacia arriba».
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 Fly 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('fly up');
})
</script>
</body>
</html>
Producción:
Transición de vuelo de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/transition.html#fly
Publicación traducida automáticamente
Artículo escrito por volumezero9786 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA