Semantic-UI Slide Transition

Last Updated : 09 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 slide transition can make the webpage element slide into view from a given direction i.e. u, down, right, or left. To add slide transition to any div or HTML element in the semantic UI, we use the .transition() function with “slide up/down/left/right” parameter. This makes the element slide in if it is out of the screen and slide out if it is on screen.

Syntax:

$('.selector').transition('slide up/down/left/right');

Example 1: The following example demonstrates the slide transition of semantic UI in the h1 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> 
<style> 
    .demo{ 
        height: 500px; 
        width: 500px; 
        margin-top: 50px; 
        background-color: green; 
        color: white; 
    } 
</style> 
<body>  
     <center>    
        <h1 class="ui green demo">GeeksforGeeks</h1> 
        <strong>Semantic UI slide transition</strong><br/> 
        <br/> 
        <button class="button1"> slide up </button> 
        <button class="button2"> slide down </button> 
        <button class="button3"> slide right </button> 
        <button class="button4"> slide left </button> 
    </center>   
    <script> 
        $('.button1').click(function () { 
            $('.demo').transition('slide up'); 
        }); 
        $('.button2').click(function () { 
            $('.demo').transition('slide down'); 
        }); 
        $('.button3').click(function () { 
            $('.demo').transition('slide left'); 
        }); 
        $('.button4').click(function () { 
            $('.demo').transition('slide right'); 
        });     
    </script> 
</body> 
</html>

Output:

Semantic-UI Slide Transition

Example 2: The following example demonstrates the slide transition of semantic UI in the image element randomly choosing the direction.

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> 
<style> 
    .main{ 
        margin-top: 50px; 
    } 
</style> 
<body> 
    <center> 
        <h1 class="ui green">GeeksforGeeks</h1> 
        <strong>Semantic UI slide transition</strong><br/> 
        <img src= 
"https://geeksgod.com/wp-content/uploads/2021/06/GeeksforGeeks.png" 
            class="main"/> 
        <br/> 
        <button class="button"> 
            Random transition 
        </button> 
    </center> 
    <script> 
      $('.button').click(function () { 
          let x=Math.floor(Math.random() * 3) + 1; 
          switch(x) { 
                case 1: 
                  $('.main').transition('slide up'); 
                  break; 
                case 2: 
                  $('.main').transition('slide down'); 
                  break; 
              case 3: 
                  $('.main').transition('slide left'); 
                  break; 
                case 4: 
                  $('.main').transition('slide right'); 
                  break; 
                default: 
                  $('.main').transition('slide up');  
          }         
      });     
    </script> 
</body> 
</html>