有沒有辦法排除規則，不影響我的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") 
     }); 
    });