有没有办法排除规则，不影响我的jQuery？

Question

我有这个规则，我的CSS：

* { 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-transition: all 0.6s ease-out; 
    -moz-transition: all 0.6s ease-out; 
    -ms-transition: all 0.6s ease-out; 
    -o-transition: all 0.6s ease-out; 
    transition: all 0.6s ease-out; 
} 

我有这个jQuery效果：

$(document).ready(function(){ 
    $("#hide").click(function(){ 
     $("#entries").hide(400); 
     $("#message").show(400); 
    }); 
    $("#close").click(function(){ 
     $("#message").hide(400); 
     $("#entries").show(400); 
    }); 
}); 

当我按下 “#hide”，在显示和隐藏#entries和效果＃消息由于转换而被破坏。有没有排除规则的方法，只对jQuery显示/隐藏没有影响？

Answer 1

您可以更改规则：

*:not(#message):not(#entries) { 
    /* your rules here */ 
} 

Answer 2

尝试排除来自css规则active类;添加，动画

CSS

*:not(.active) { 
     box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     -webkit-transition: all 0.6s ease-out; 
     -moz-transition: all 0.6s ease-out; 
     -ms-transition: all 0.6s ease-out; 
     -o-transition: all 0.6s ease-out; 
     transition: all 0.6s ease-out; 
    } 

JS

$(document).ready(function(){ 
    var elems = $("#entries, #message"); 
    $("#hide").click(function(){ 
     elems.addClass("active"); 
     $("#entries").hide(400); 
     $("#message").show(400, function() { 
      elems.removeClass("active") 
     }); 
    }); 
    $("#close").click(function(){ 
     elems.addClass("active"); 
     $("#message").hide(400); 
     $("#entries").show(400, function() { 
      elems.removeClass("active") 
     }); 
    });