Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.
Semantic UI Transition is an animation that is used to move the webpage content in or out of view using the Semantic UI transition method.
The Semantic UI flip transition can make the webpage element flip into view if it is not on the screen or flip out of the view if it is on screen. To add flip transition to any div or HTML element in the Semantic UI, we use the .transition() function with “horizontal flip” or “vertical flip” parameter.
- Horizontal flip: This flips the element horizontally during the transition.
- Vertical flip: This flips the element vertically during the transition.
Syntax:
$('.selector').transition('vertical flip');Example 1: The following example demonstrates both the horizontal flip and vertical flip transition of Semantic UI in the <img> element.
<!DOCTYPE html> <html>
<head>
<link href=
rel="stylesheet" />
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui header green">Geeksforgeeks</h1>
<strong>Semantic UI flip transition</strong><br/>
<img src=
class="ui demo"/><br/>
<br/>
<button class="button1"> Horizontal flip </button>
<button class="button2"> Vertical flip </button>
</center>
<script>
$('.button1').click(function () {
$('.demo').transition('horizontal flip');
});
$('.button2').click(function () {
$('.demo').transition('vertical flip');
});
</script>
</body>
</html>
|
Output:
Semantic-UI Flip Transition
Example 2: The following example demonstrates the flip transition of Semantic UI in the text <div> element randomly choosing the direction.
<!DOCTYPE html> <html>
<head>
<link href=
rel="stylesheet" />
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
</script>
<style>
.demo{
height: 300px;
width: 300px;
color: white;
background-color: green;
padding: 20px;
}
</style>
</head>
<body>
<center>
<h1 class="ui header green">Geeksforgeeks</h1>
<strong>Semantic UI flip transition</strong><br/>
<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/>
<br/>
<button class="button"> Random flip </button>
</center>
<script>
$('.button').click(function () {
let x=Math.floor(Math.random() * 2) + 1;
switch(x) {
case 1:
$('.demo').transition('horizontal flip');
break;
case 2:
$('.demo').transition('vertical flip');
break;
default:
$('.demo').transition('horizontal flip');
}
});
</script>
</body>
</html>
|
Output:
Semantic-UI Flip Transition
Reference: https://semantic-ui.com/modules/transition.html#flip