我怎樣才能像css-transitions一樣使jquery toggleClass動畫化適當的類的孩子？

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過渡），則它只會對目標元素進行動畫處理。 （即.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

您遇到的問題是由.box內的.mini-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代碼也選擇了mini box並向其中添加.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/