语义 UI 丢弃转换

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

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

Semantic UI drop transition 可以使网页元素分别以降序和升序的方式落入或落出视图。为了给语义 UI 中的任何 div 或 HTML 元素添加 drop 过渡，我们使用带有“drop”参数的 .transition()函数。如果元素在屏幕外，这会使元素落入视图，如果它在屏幕上，则从视图中退出。

过渡参数：

• drop：这使选定的类/id 元素进入或退出视图。

句法：

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

示例 1：以下示例演示了 元素中语义 UI 的基本放置过渡。

HTML

  

  
  
  
  
  
  

  

  
    Geeksforgeeks
    
  
    
      Semantic UI drop transition
    
      
    
      Drop
    
  
    
  
    $(".button").click(function () {
      $(".demo").transition("drop");
    });
  

  

输出：

输出

示例 2：以下示例演示了文本

元素中语义 UI 的基本放置过渡。

HTML

  

  
  
  
  
  
  
  
    .demo{
      height: 300px;
      width: 300px;
      color: white;
      background-color: green;
      padding: 20px;
    }
  

  

  
    Geeksforgeeks
    
      Geeksforgeeks
       
         Self-Paced Course With Doubt Assistance 
         To Learn & Practice For Placement In Top 
         Companies. Data Structures And Algorithms 
         Is The Key To Selection In Product Based 
         Companies. Content Lifetime Validity. Get 
         Certified. Premium Video Lectures. 
      
    
  
    
      Semantic UI drop transition
    
      
    
      Drop
    
  
    
  
    $(".button").click(function () {
      $(".demo").transition("drop");
    });
  

  

输出：

输出

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