0

編集: CSS トランジションを削除してアニメーションを修正しました。

私は実際に2つの問題を抱えています。1 つ目は、幅のアニメーションの最後で UL が点滅します。原因がわからず、修正できないようです。

2 つ目は、UL を と同じ回線に入れようとしているということです。アニメーション機能を変更して、display:inline-block代わりに追加する方法はありdisplay:blockますか?

// toggle filters
$(".filter .toggle").on('click', function(){
    $('.filter').find('.toggle').toggleClass('test').end()
                .find('ul').animate({width:'toggle'}, 1000);
});


.filter {
    padding-left:25px;
    padding-bottom:10px;
    width:500px;
}

.filter * {
    -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;
}

.filter .toggle.test {
    padding:7px;
    color:#eee;
    background-image: linear-gradient(bottom, #272527 31%, #2f2c2e 66%, #373435 83%);
    background-image: -o-linear-gradient(bottom, #272527 31%, #2f2c2e 66%, #373435 83%);
    background-image: -moz-linear-gradient(bottom, #272527 31%, #2f2c2e 66%, #373435 83%);
    background-image: -webkit-linear-gradient(bottom, #272527 31%, #2f2c2e 66%, #373435 83%);
    background-image: -ms-linear-gradient(bottom, #272527 31%, #2f2c2e 66%, #373435 83%);
    font-size:15px;
    border-radius:5px 0 0 5px;
}

.filter .toggle {
    font-size:11px;
    border-radius:5px;
    display:inline-block;
    vertical-align:top;
    cursor:pointer;
    background:rgba(255,255,255,0.8);
    padding:4px;
    line-height:14px;
}
    .filter .toggle:before {
        font-family:icon;
        content:'\f0c9';
        padding-right:5px;
        color:#888;
    }

.filter ul {
    display:none;
    height:18px;
    vertical-align:top;
    overflow:hidden;
    background:white;
}

.filter li {
    display:inline-block;
    padding-right:10px;
    font-size:16px;
}

<div class="filter">
   <span class="toggle">Filters</span>
   <ul>
     <li class="active">All</li>
     <li>One</li>
     <li>Two</li>
     <li>Three</li>
     <li>Four</li>
  </ul>
</div>

ここにフィドルがあります - [フィルタ] をクリックします。

4

2 に答える 2

0

アニメーションと CSS トランジションの間に競合があります。CSS トランジション ルールを削除すると、ちらつき (特にwidthルール上のトランジション) なしで動作するようです。

他の理由でまだトランジションが必要な場合は、どのトランジションかをより具体的にしてください。CSS からはわかりませんが、次のようなものです。

transition: border-radius .2s linear, padding .2s linear;

ちなみに、-webkitこの時点では、おそらく非ベンダーのみが必要です。

于 2013-02-08T19:25:17.323 に答える
0

CSS でこの行を削除すると、すべてが正常に機能するはずです

.filter * {
-webkit-transition: all 0.2s linear 0;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

ちなみに、これはブラウザ固有の問題です。Chromium (おそらく Webkit) に影響しますが、Firefox や Opera には影響しません。IE と Safari ではテストできません。上記のアニメーションを削除すると、問題が解決します。

于 2013-02-08T19:27:18.240 に答える