Open In App

Semantic-UI Swing Transition

Improve
Improve
Like Article
Like
Save
Share
Report

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 swing transition.  

It is equipped with pre-built semantic components that help create responsive layouts using user-friendly HTML, and it uses predefined CSS and jQuery to incorporate different frameworks.

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

Parameters Value:

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

Syntax:

$('.image').transition('swing right');

Example 1:The following code demonstrates the swing transition in the right direction.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
          rel="stylesheet" />
          integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
          crossorigin="anonymous">
    </script>
      
    <script src=
    </script>
</head>
  
<body>
    <center>
        <h1 class="ui header green">GeeksforGeeks</h1>
        <strong>Semantic UI Swing Transitions</strong>
        <br/>        
      
        <div class="ui container">        
            <img class="ui image medium" 
                 src=
            <br/>
            <button class="ui button">
                Click here!!
            </button>        
        </div>
    </center>
  
    <script>
        $('button').click(function () {
            $('.image').transition('swing right');
        })
    </script>
</body>
</html>


Output:

Example 2: The following example demonstrates the swing transition in the up direction.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
          rel="stylesheet" />
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
      
    <script src=
    </script>
</head>
  
<body>
    <center>
        <h1 class="ui header green">GeeksforGeeks</h1>
        <strong>Semantic UI Swing Transitions</strong>
        <br/>        
      
        <div class="ui container">        
            <img class="ui image medium"
                 src=
            <br/>
            <button class="ui button">
                Click here!!
            </button>        
        </div>
    </center>
    <script>
        $('button').click(function () {
            $('.image').transition('swing up');
        })
    </script>
</body>
</html>


Output:

Reference: https://semantic-ui.com/modules/transition.html#swing



Last Updated : 20 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads