2

私はクラスを持っていると言います：

.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が追加されると、両方の要素が適切にアニメーション化されます。

アニメーション時間でjQuerytoggleClassを適用すると（css-transitionsが有効になっていない場合）、ターゲット要素のみがアニメーション化されます。（つまり、.box）。

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

これは、jquery uiのtoggleClassメソッドを親メソッドに適用すると、発生しません。cssトランジションのように動作させる方法はありますか？

ここで問題を確認できます：http：//jsfiddle.net/yg8rz/1/ 2番目の（ミニ）ボックスが色を移行していません。

ここで目的の結果を確認できます。http：//jsfiddle.net/yg8rz/4/ これを機能させるには、Webkitブラウザーを使用している必要があります（この場合）。

注：より良いcssプラクティス（javascriptトランジションなしで未来に傾く）のために、要素が子要素にアクティブクラスを直接適用するのではなく、祖先からアクティブクラスを継承することが重要です。

ie8 +で機能するように、このソリューションでjavascriptを使用することも重要です。

4

1 に答える 1

1

発生している問題は、(セレクターから判断して) .mini-box が .box 内にあることが原因です。.box 要素にトランジションを適用すると、正常に動作しますが、トランジションまで .box には .active クラスがないため、.mini-box は .box.active .mini-box セレクターによってまったく選択されません。完了します。

このような回避策を作ることができます

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/

于 2013-01-20T23:20:08.003 に答える