语义-UI 摆动过渡

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

它配备了预构建的语义组件，可帮助使用用户友好的 HTML 创建响应式布局，并使用预定义的 CSS 和 jQuery 来整合不同的框架。

过渡是一种动画，通常用于将内容移入或移出视图，并且可以在单击时摆动到视图中。我们甚至可以使用方向（即向上、向下、向右或向左）为挥杆指定特定方向。向语义 UI 中的任何 div 或 HTML 元素添加摆动过渡。我们使用带有以下参数的 .transition()函数以及“swing”参数。这使元素摆动。此方法用于控制元素的两种状态之间发生转换的方式。

参数值：

• up：此属性用于设置摆动过渡到向上。
• down：该属性用于设置摆动过渡到向下。
• right：该属性用于设置向右的摆动过渡。
• left：该属性用于设置向左摆动过渡。

句法：

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

示例 1： 以下代码演示了正确方向的摆动过渡。

HTML

  

    Semantic UI
    
     
    
      
    
    

  

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

输出：

示例 2：以下示例演示了向上方向的摆动过渡。

HTML

  

    Semantic UI
    
    
    
      
    
    

  

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

输出：

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