jquery - 我怎样才能让jquery的toggleClass像css-transitions一样将 child 动画到适当的类？

Question

假设我有类(class):

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

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

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

如果我应用带有动画时间的 jQuery 切换类(没有启用任何 css-transitions)，它只会对目标元素进行动画处理。 (即.box)。

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

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

您可以在此处查看问题:http://jsfiddle.net/yg8rz/1/第二个(迷你)框没有过渡颜色。

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

注意:为了更好的 css 实践(倾向于 future 没有 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; }

fiddle :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/