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

【问题标题】：Conflict between CSS transition and jQuery fadeCSS过渡和jQuery淡出之间的冲突
【发布时间】：2015-01-13 00:55:32
【问题描述】：

我正在尝试创建一个带有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 中删除过渡，淡入淡出确实有效，但我也想保留过渡以在元素被显示/隐藏后重新定位它们。

【问题讨论】：

我会尝试这样的事情：让你的 jQuery 代码在元素完成后添加一个 CSS 类（enable-transitions 或其他东西）。将 CSS 过渡附加到 .block.enable-transitions 等（反之亦然，让 jQuery 添加一个类以在您淡化元素时阻止过渡，并在 CSS 中使用 :not()，如果您想在元素上启用过渡 jQuery从不使用。）
尽管现在有一些新的不同的错误，但它确实有效！所以现在我在褪色发生时禁用缓动，然后再次允许缓动。谢谢！

标签： jquery css

【解决方案1】：

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

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

你把 html 做成这样：

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

然后你只是淡化父级：

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

而且不需要丑陋的修复。

【讨论】：

【解决方案2】：

我通常会按照 Milloose 的建议去做：

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

transEnabl 类似于：

.transEnabl {
  transition: all 0.3s linear;
}

它丑得要命，但它确实有效。问题来了，因为 css 转换在不透明度的执行上给出了一个持续时间。

【讨论】：

这对我不起作用，正在添加/删除课程，转换正在工作，但淡入/淡出仍然不起作用。
当您说“不起作用”时，您是什么意思？不触发？元素突然出现，没有过渡？请更明确一点。
如果我没记错的话，问题是它没有顺利淡出/淡入，就像你说的那样突然出现。

【解决方案3】：

如果Hector's solution 不适合您，这里有一个更丑陋的解决方案。（我们一起消除了 JQuery 的调用）

淡出示例：

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

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

【讨论】：