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 escala.
Está equipado con componentes semánticos preconstruidos que ayudan a crear diseños receptivos utilizando HTML fácil de usar. Este método se utiliza para controlar la forma en que se produce la transición entre los dos estados del elemento.
Un elemento puede escalar dentro o fuera de la vista mientras la transición se lleva a cabo por algún evento.
Sintaxis:
$('.image').transition('scale');
Ejemplo 1: El siguiente código demuestra la transición de escala de la imagen.
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 Scale 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('scale');
})
</script>
</body>
</html>
Producción:
Transición de escala de interfaz de usuario semántica
Ejemplo 2: El siguiente ejemplo demuestra la transición de escala en el evento de desplazamiento de la imagen por parte del usuario como se muestra en la salida.
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 Scale 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>
$('img').hover(function () {
$('.image').transition('scale');
})
</script>
</body>
</html>
Producción:
Transición de escala de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/transition.html
Publicación traducida automáticamente
Artículo escrito por volumezero9786 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA