Semantic-UI Browse 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 browse transition.

Semantic UI has a bunch of components for users to design web pages. An element from the page can appear and disappear in many different ways as per user requirements. A transition is an animation usually used to move content in or out of view and it can appear and disappear as part of a series. This method is used to control the way in which transition takes place between the two states of the element.

Syntax:

 $('.image').transition('browse');

Example 1: The below example illustrates the Semantic UI browse 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 Browse Transitions</strong>     
      
        <div class="ui container">             
            <img class="ui image medium" 
                 src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" /> 
            <br> 
            <button class="ui button"> 
                Click here!! 
            </button>         
        </div> 
    </center> 
  
    <script> 
        $('button').click(function () { 
            $('.image').transition('browse'); 
        }) 
    </script> 
</body> 
</html> 

Output:

Semantic-UI Browse Transition

Example 2: The following example demonstrates the browse transition with a colorful image.

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