CSS transition和jQuery fade之间的冲突 [英] Conflict between CSS transition and jQuery fade

问题描述

我试图创建一个带有一些小菜单的平铺墙， display：none 基于他们的类的一些元素。在我的CSS我有CSS转换，导致 fadeIn 和 fadeOut 不工作。如果我添加一个时间，元素将花费这么长时间消失，但​​没有实际的衰落。

I'm trying to create a tiled wall with a little menu to display: none some elements based on their class. In my CSS I have CSS transitions which are causing fadeIn and fadeOut to not work. If I add a time, the element will take that long to disappear, but there is no actual fading.

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：

The JavaScript using jQuery:

$(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中删除过渡，淡入淡出工作，但我也想保持过渡

If I remove the transitions from my CSS the fades do work, but I also want to keep the transitioning to reposition the elements after they have been revealed/hidden.

推荐答案

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

I'd say the cleanest fix for this is to put an extra element around the element that you want to fade. For instance if you're trying to fade this element:

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

您可以使用html：

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

然后你只是淡化父母：

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

而且没有必要修复错误。

And there's no need for ugly fixes.

这篇关于CSS transition和jQuery fade之间的冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！