语义-UI 翻转过渡

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

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

语义 UI 翻转过渡可以使网页元素不在屏幕上时翻转到视图中，如果在屏幕上时翻转到视图外。要将翻转过渡添加到语义 UI 中的任何 div 或 HTML 元素，我们使用带有“水平翻转”或“垂直翻转”参数的.transition()函数。

• 水平翻转：在过渡期间水平翻转元素。
• 垂直翻转：在过渡期间垂直翻转元素。

句法：

$('.selector').transition('vertical flip');

示例 1：以下示例演示了语义 UI 在 元素中的水平翻转和垂直翻转过渡。

HTML

        
    
    
    
    

  
 
        
         Geeksforgeeks
          Semantic UI flip transition
                
        
         Horizontal flip 
         Vertical flip 
      
      
    
        $('.button1').click(function () {
            $('.demo').transition('horizontal flip');
        });
        $('.button2').click(function () {
            $('.demo').transition('vertical flip');
        });
    

输出：

语义-UI 翻转过渡

示例 2：以下示例演示了 Semantic UI 在文本

元素中随机选择方向的翻转过渡。

HTML

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

  
 
        
         Geeksforgeeks
          Semantic UI flip transition
          
            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. 
            
  
               
        
         Random flip 
      
      
    
        $('.button').click(function () {
          let x=Math.floor(Math.random() * 2) + 1;
          switch(x) {
                case 1:
                  $('.demo').transition('horizontal flip');
                  break;
                case 2:
                  $('.demo').transition('vertical flip');
                  break;
                default:
                  $('.demo').transition('horizontal flip');
          }        
      });    
    

输出：

语义-UI 翻转过渡

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