Question

说我有课程：

.box {  background:red; }
.box .mini-box { background:green; }

.box.active {  background:purple; }
.box.active .mini-box { background:yellow; }

如果我使用css-transitions，我只需添加transition:all 0.5s ease;，当添加类active时，两个元素都会适当地进行动画处理。

如果我将jQuery toggleClass与动画时间一起应用（没有启用任何css-transitions），它只会动画目标元素。（即.box）。

$('.box').toggleClass('active', 500);

当我将它应用于父方法时，jquery ui的toggleClass方法不会发生这种情况。有没有办法让它像css过渡那样表现？

您可以在此处查看问题：http://jsfiddle.net/yg8rz/1/ 第二个（迷你）盒子没有过渡颜色。

您可以在此处看到所需的结果：http://jsfiddle.net/yg8rz/4/ 您必须使用webkit浏览器才能工作（在本例中）。

注意：为了更好的css练习（倾向于没有javascript转换的未来），重要的是元素从祖先继承活动类，而不是直接将活动类应用于任何子级元件。

此解决方案使用javascript以便在ie8 +

中起作用也很重要

Answer 1

您遇到的问题是由.mini-box（从您的选择器判断）在.box内部引起的。当您将转换应用到.box元素时，它可以正常工作，但您的.box.active .mini-box选择器根本没有选择.mini-box，因为.box在转换之前没有.active类完成。

您可以像这样制作解决方法

HTML：

    <div class="box">normal 1</div>
    <div class="box">
        normal 2
        <div class="box mini-box">
            mini
        </div>
    </div>

CSS：

.box {  background:red; }
.box .mini-box, .box.mini-box { background:green; }

.box.active {  background:purple; }
.mini-box.active { background:yellow; }

小提琴：http://jsfiddle.net/yg8rz/3/

您需要将转换应用于.box和.mini-box元素，我更改了css类，因此相同的jQuery代码也会选择迷你盒并添加.active。

这是或者将css转换添加到您的类中。您可以通过以下方式覆盖所有（主要）浏览器：

-webkit-transition: all 0.5 ease;
-moz-transition: all 0.5 ease;
-o-transition: all 0.5 ease;
transition: all 0.5 ease;

您只能使支持非转换的浏览器使用带有Modernizr的JavaScript：

$(".box").toggleClass("active");
if(!Modernizr.csstransitions){
    $(".mini-box").toggleClass("active", 500);
}

http://jsfiddle.net/yg8rz/10/

我怎样才能使jquery toggleClass将子项动画为适当的类，就像css-transitions一样？

1 个答案: