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 del swing.
Está equipado con componentes semánticos preconstruidos que ayudan a crear diseños receptivos utilizando HTML fácil de usar, y utiliza CSS y jQuery predefinidos para incorporar diferentes marcos.
Una transición es una animación que generalmente se usa para mover el contenido dentro o fuera de la vista y puede cambiar a la vista al hacer clic. Incluso podemos asignar una dirección específica para el swing utilizando la dirección, es decir, arriba, abajo, derecha o izquierda. Para agregar una transición swing 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 «swing». Esto hace que el elemento oscile. Este método se utiliza para controlar la forma en que se produce la transición entre los dos estados del elemento.
Valor de los parámetros:
- up: esta propiedad se usa para establecer la transición de swing hacia arriba.
- down: esta propiedad se usa para establecer la transición de swing hacia abajo.
- right: esta propiedad se usa para establecer la transición de swing a la derecha.
- izquierda: esta propiedad se utiliza para establecer la transición de swing a la izquierda.
Sintaxis:
$('.image').transition('swing right');
Ejemplo 1: El siguiente código demuestra la transición de oscilación en la dirección correcta.
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 Swing Transitions</strong>
<br/>
<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('swing right');
})
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra la transición de oscilación en dirección ascendente.
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 Swing Transitions</strong>
<br/>
<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('swing up');
})
</script>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/modules/transition.html#swing
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