CSS 过渡和 jQuery 淡入淡出之间的冲突

我正在尝试创建一个带有小菜单的瓷砖墙display: none一些基于其类别的元素。在我的 CSS 中，我有 CSS 转换，这会导致fadeIn and fadeOut不工作。如果我添加一个时间，该元素将需要那么长时间才能消失，但实际上并没有消失。

The CSS:

.block:not(.noTransition), .block a img, #main_side p, #main_content, #menu_container{
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

使用 jQuery 的 JavaScript：

$(document).ready(function(){
    $('.button').not("#all").click(function(){
        var theId = $(this).attr('id');
        $('.block').not('.'+theId).addClass("noTransition");
        $('.block').not('.'+theId).fadeOut('slow', function(){
            $('.block').not('.'+theId).addClass("covered");
            $('.block').not('.'+theId).removeClass("noTransition");

        });
        $('.'+theId).addClass("noTransition");
        $('.'+theId).fadeIn('slow',function(){
            $('.'+theId).removeClass("covered");
            $('.'+theId).removeClass("noTransition");    
        });
        getScreenSize();
    });
    $("#all").click(function(){
        $('.block').removeClass("covered");
        $('.block').show();
    });
    getScreenSize();
});

如果我从 CSS 中删除过渡，淡入淡出确实可以工作，但我也想保留过渡以在元素显示/隐藏后重新定位元素。

我想说最干净的解决方法是在要淡入淡出的元素周围放置一个额外的元素。例如，如果您尝试淡入淡出此元素：

<div id="fade"></div>

你把 html 做成这样：

 <div id="fade-parent">
      <div id="fade"></div>
 </div>

然后你就淡出父级：

 $('#fade-parent').fadeIn();

并且不需要丑陋的修复。