Semantic-UI Fade Transition
Last Updated :
23 Feb, 2022
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 fade transition can make the webpage element fade into or out of the view descending and ascending. We can even assign a specific direction for fading using direction i.e. up, down, right, or left. To add a fade transition to any div or HTML element in the Semantic UI. We use the .transition() function with the following parameters along with “fade” parameter. This makes the element fade in if it is out of the screen and fade out if it is on screen.
Parameters value:
- up: This property is used to fade transition to the up direction.
- down: This property is used to fade transition to the down direction.
- right: This property is used to fade transition to the right direction.
- left: This property is used to fade transition to the left direction.
Syntax:
$('.selector').transition('fade up');
Example 1: The following example demonstrates the basic fade transition of Semantic UI in the <img> element.
HTML
<!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 fade transition</strong><br/>
<img src=
class="ui demo"/><br/>
<br/>
<button class="button"> Basic fade </button><br/><br/>
</center>
<script>
$('.button').click(function () {
$('.demo').transition('fade');
});
</script>
</body>
</html>
|
Output:
Semantic-UI Fade Transition
Example 2: The following example demonstrates the directional fade transition of Semantic UI in the <img> element.
HTML
<!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 fade transition</strong><br/>
<img src=
class="ui demo"/><br/>
<br/>
<button class="button1"> fade up </button>
<button class="button2"> fade down </button>
<button class="button3"> fade right </button>
<button class="button4"> fade left </button>
</center>
<script>
$('.button1').click(function () {
$('.demo').transition('fade up');
});
$('.button2').click(function () {
$('.demo').transition('fade down');
});
$('.button3').click(function () {
$('.demo').transition('fade left');
});
$('.button4').click(function () {
$('.demo').transition('fade right');
});
</script>
</body>
</html>
|
Output:
Semantic-UI Fade Transition
Reference link: https://semantic-ui.com/modules/transition.html#fade
Share your thoughts in the comments
Please Login to comment...