Semantic-UI Drop Transition
Last Updated :
24 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 drop transition can make the webpage element drop into or out of the view descending and ascending respectively. To add drop transition to any div or HTML element in the semantic UI, we use the .transition() function with “drop” parameter. This makes the element drop into the view if it is out of the screen and drop out of the view if it is on screen.
Transition Parameter:
- drop: This makes the selected class/id element drop in or out of view.
Syntax:
$('.selector').transition('drop');
Example 1: The following example demonstrates the basic drop transition of semantic UI in the <img> element.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet"/>
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<img src=
class="ui demo"/><br/>
<strong>
Semantic UI drop transition
</strong><br/><br/>
<button class="button">
Drop
</button>
</center>
<script>
$(".button").click(function () {
$(".demo").transition("drop");
});
</script>
</body>
</html>
|
Output:
Output
Example 2: The following example demonstrates the basic drop transition of semantic UI in the text <div> element.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet"/>
"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>Geeksforgeeks</h1>
<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/>
<strong>
Semantic UI drop transition
</strong><br/><br/>
<button class="button">
Drop
</button>
</center>
<script>
$(".button").click(function () {
$(".demo").transition("drop");
});
</script>
</body>
</html>
|
Output:
Output
Reference: https://semantic-ui.com/modules/transition.html#drop
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...