语义-UI 飞跃过渡

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

它配备了预构建的语义组件，可帮助使用用户友好的 HTML 创建响应式布局。单击按钮时，元素可以飞入或飞出画布。

此方法用于控制在单击时元素的两种状态之间发生转换的方式。我们甚至可以使用方向（即向上、向下、向右或向左）为飞行过渡指定特定方向。向语义 UI 中的任何 div 或 HTML 元素添加飞行过渡。我们使用带有以下参数的.transition()函数以及“fly”参数。这使元素飞起来。

参数值：

• up：此属性用于将飞行过渡设置为向上。
• down：此属性用于设置飞行过渡到向下。
• right：此属性用于将飞行过渡设置为向右。
• left：此属性用于设置向左飞行的过渡。

句法：

$('.image').transition('fly up'); 

示例 1：下面的示例说明了语义 UI 飞行过渡。

HTML

  

    Semantic UI
    
    
      
    
    
    

  

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

输出：

语义-UI 飞跃过渡

示例 2：以下代码演示了“向上”方向的飞行过渡。

HTML

  

    Semantic UI
    
    
       
   
    
    

  

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

输出：

语义-UI 飞跃过渡

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