语义 UI 缩放转换

Semantic UI 是一个开源框架，它使用 CSS 和 jQuery 构建出色的用户界面。它与使用的引导程序相同，并且有很多不同的元素可用于使您的网站看起来更令人惊叹。

语义 UI 过渡是一种动画，用于使用语义 UI 过渡方法将网页内容移入或移出视图。

语义 UI 缩放转换可以将网页元素缩放到远处的视图中。要将缩放转换添加到语义 UI 中的任何 div 或 HTML 元素，我们使用带有“zoom”参数的.transition()函数。这使得元素在屏幕外时放大，如果在屏幕上则缩小。

句法：

$('.selector').transition('zoom');

示例 1：以下示例演示了语义 UI 在 h1 元素中的缩放过渡。

HTML

  

    Semantic UI zoom transition
        
      


    .demo{
        height: 500px;
        width: 500px;
        margin-top: 50px;
        background-color: green;
        color: white;
    }


      
     
           
        GeeksforGeeks
        Semantic UI zoom transition
        
         transition 
      
    
    
      
    
    
    
        $('button').click(function () {
            $('.demo').transition('zoom');
        })        
    

输出：

示例 2：以下代码演示了图像元素中语义 UI 的缩放过渡。

HTML

  

    Semantic UI zoom transition
    


    .main{
        margin-top: 50px;
    }


    
        GeeksforGeeks
        Semantic UI zoom transition
        
        
       
    
        
            transition
        
    
  
    
    
      
    
        
    
        $( document ).ready(function() {
            $('#demo').transition('zoom');
        }); 
        $('button').click(function () {
            $('.main').transition('zoom');
        })        
    

输出：

参考链接： https ://semantic-ui.com/modules/transition.html#zoom