3

css3トランジションが1回だけ正しく機能し、その後トランジションが機能しない理由を見つけて修正しようとしています。これはjQueryとは異なるアニメーションです。誰もそれを見たことがありますか？理由を教えてください。事前に感謝します。

これが私のコードです。

4

1 に答える 1

0

要素が表示されていないときに、.localize 要素の css トランジションがアクティブになっているとは思いません。「display: none !important;」を削除すると 「.ui-tabs .ui-tabs-hide」から、正常に動作します (ただし、両方のタブが表示されます)。

.ui-tabs .ui-tabs-hide
{
    display: none !important; // remove this line to see what I'm talking about
}

localize() はすぐに下の値を 0 に設定し、タブが非表示になっているため、CSS 遷移アニメーションはありません。トランジションがないということは、バーがアニメーションなしで「bottom: 0」までまっすぐジャンプしていることを意味します。

次のように、localize() と resetLocalize() を組み合わせて、短いタイムアウトを使用して、タブが再び表示された後に下部の CSS を設定することに成功しました。

function localize() {
    $(".bar1.localize").css({ bottom: -180 });
    $(".bar2.localize").css({ bottom: -215 });
    $(".bar3.localize").css({ bottom: -225 });

    setInterval(function(){
         $(".bar1.localize, .bar2.localize, .bar3.localize").css({ bottom: 0 });
    },1);
   ;
}

私のフィドルを参照してください：http://jsfiddle.net/jtlowe/4TxqZ/11/

于 2013-08-30T17:21:08.360 に答える