Semantic-UI Fly Transition

Last Updated : 20 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. In this article, we are going to learn about Fly Transition.

It is equipped with pre-built semantic components that help create responsive layouts using user-friendly HTML. An element can fly in or from off-canvas on clicking the button.

This method is used to control the way in which transition takes place between the two states of the element on click. We can even assign a specific direction for fly transition using direction i.e. up, down, right, or left. To add a fly transition to any div or HTML element in the Semantic UI. We use the .transition() function with the following parameters along with the “fly” parameter. This makes the element fly.

Parameters Value:

up: This property is used to set the fly transition to the up.
down: This property is used to set the fly transition to the down.
right: This property is used to set the fly transition to the right.
left: This property is used to set the fly transition to the left.

Syntax:

$('.image').transition('fly up');

Example 1: The below example illustrates the Semantic UI fly transition.

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 Fly 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('fly'); 
        }) 
    </script> 
</body> 
</html> 

Output:

Semantic-UI Fly Transition

Example 2: The following code demonstrates the fly transition in the “up” direction.

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 Fly 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('fly up'); 
        }) 
    </script> 
</body> 
</html> 