Question

我正在尝试创建一个带有一个小菜单的平铺墙，以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

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

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

你制作html：

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

然后你就会淡化父母：

 $('#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's solution对你不起作用，这是一个更加丑陋的解决方案。（我们一起消除了JQuery的调用）

fadeOut示例：

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

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

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

3 个答案: