语义-UI 淡入淡出过渡

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

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

语义 UI 淡入淡出过渡 可以使网页元素以降序和升序淡入或淡出视图。我们甚至可以使用方向（即上、下、右或左）指定一个特定的淡化方向。为语义 UI 中的任何 div 或 HTML 元素添加淡入淡出过渡。我们使用带有以下参数的.transition()函数以及“fade”参数。如果元素不在屏幕上，这会使元素淡入，如果在屏幕上，则淡出。

参数值：

• up：此属性用于淡入淡出过渡到向上方向。
• down：此属性用于淡入淡出过渡到向下方向。
• right：此属性用于淡入淡出过渡到正确的方向。
• left：该属性用于向左方向淡入淡出过渡。

句法：

$('.selector').transition('fade up');

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

HTML

    
    
    
    
            

 

      
         Geeksforgeeks
         Semantic UI fade transition
                
        
         Basic fade 
     
     
    
        $('.button').click(function () {
            $('.demo').transition('fade');
        });
    

输出：

语义-UI 淡入淡出过渡

示例 2：以下示例演示了语义 UI 在 元素中的方向淡化过渡。

HTML

    
    
    
    
            

 

      
         Geeksforgeeks
         Semantic UI fade transition
                
        
         fade up 
         fade down 
         fade right 
         fade left 
     
     
    
        $('.button1').click(function () {
            $('.demo').transition('fade up');
        });
        $('.button2').click(function () {
            $('.demo').transition('fade down');
        });
        $('.button3').click(function () {
            $('.demo').transition('fade left');
        });
        $('.button4').click(function () {
            $('.demo').transition('fade right');
        });   
    

输出：

语义-UI 淡入淡出过渡

参考链接： https://semantic-ui.com/modules/transition.html#fade