5

我正在尝试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 中删除过渡，则淡入淡出确实有效，但我也希望在元素被显示/隐藏后保持过渡以重新定位元素。

4

3 回答 3

4

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

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

您将 html 设为：

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

然后你只是淡化父母：

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

并且不需要丑陋的修复。

于 2015-01-12T16:55:32.080 回答
3

我通常按​​照millimoose的建议做：

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

其中transEnabl类似于：

.transEnabl {
  transition: all 0.3s linear;
}

它很丑陋，但它确实有效。问题来了，因为 css 过渡给不透明度的执行提供了持续时间。

于 2013-10-30T06:26:02.513 回答
0

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

淡出示例：

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

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

于 2014-12-16T21:22:43.073 回答