Semantic-UI Drop Transition
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 = "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 >w3wiki</ h1 > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png" 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:
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 = "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 > < style > .demo{ height: 300px; width: 300px; color: white; background-color: green; padding: 20px; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < div class = "ui demo" > < h1 >w3wiki</ 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:
Reference: https://semantic-ui.com/modules/transition.html#drop