语义-UI 尺度转换

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

它配备了预构建的语义组件，可帮助使用用户友好的 HTML 创建响应式布局。此方法用于控制元素的两种状态之间发生转换的方式。

当某个事件发生转换时，一个元素可以缩放到视图中或视图之外。

句法：

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

示例 1：以下代码演示了图像的缩放转换。

HTML

  

    Semantic UI
    
    
    
      
    
    

  

    
        GeeksforGeeks
        Semantic UI Scale Transitions    
      
                        
            
            
            
                Click here!!
                    
        
    
      
    
        $('button').click(function () {
            $('.image').transition('scale');
        })        
    

输出：

语义-UI 尺度转换

示例 2：以下示例演示了用户对图像悬停事件的缩放转换，如输出所示。

HTML

  

    Semantic UI
    
    
        
    
    

  

    
        GeeksforGeeks
        Semantic UI Scale Transitions    
      
                        
            
            
            
                Click here!!
                    
        
    
      
    
        $('img').hover(function () {
            $('.image').transition('scale');
        })
    

输出：

语义-UI 尺度转换

参考： https://semantic-ui.com/modules/transition.html