CSS转换和jQuery之间的冲突消退

我正在尝试创建一个带有一个小菜单的平铺墙来display: none一些基于他们类的元素。 在我的CSS中，我有CSS转换，导致fadeIn和fadeOut不起作用。 如果我添加一个时间，元素将花费很长时间消失，但​​没有实际的褪色。

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中删除了转换，则淡入淡出确实起作用，但我还希望保持转换以在元素被显示/隐藏后重新定位元素。

Answer 1

我要说最干净的解决办法就是在要褪色的元素周围加一个额外的元素。 例如，如果你试图淡化这个元素：

你制作html：

然后你就会淡化父母：

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

并且不需要丑陋的修复。

Answer 2

我通常会做毫摩尔建议的事情：

 $('#cboxClose').removeClass('transEnabl').fadeIn(500, function() { $(this).addClass('transEnabl'); }); 

transEnabl的地方如下：

 .transEnabl { transition: all 0.3s linear; } 

这很难看，但它确实有效。 之所以出现这个问题，是因为css转换会给执行不透明度带来持续时间。

Answer 3

如果Hector的解决方案不适合您，这是一个更加丑陋的解决方案。 （我们一起消除JQuery的调用）

fadeOut示例：

 $('#test').css('opacity', 0); window.setTimeout(function() { $('#test').remove(); }, $('#test').css('transition-duration').replace('s','')*1000); 

基本上我们依靠CSS转换来进行转换，然后我们只是在JS中等待CSS定义的转换持续时间。