3

要素のリストが 2 つあり、単純な CSS トランジションを使用して、あるリストから別のリストに項目を移動したいと考えています。

ロジック:

  • クラスを要素に追加しhiddenてフェードアウトします ( opacity: 0, width: 0, plus transition)
  • トランジションが終了したら、要素を別のリストに移動します
  • hidden要素がフェードインするようにクラスを削除します

HTML

<ul id="list1">
    <li id="item1">Item 1</li>
    <li id="item2">Item 2</li>
</ul>

<ul id="list2">
    <li id="item3">Item 3</li>
    <li id="item4">Item 4</li>
</ul>

CSS

...
li {
    display: block;
    float: left;
    height: 80px;
    margin: 0 2px;
    -webkit-transition: all 1s ease-in-out;
       -moz-transition: all 1s ease-in-out;
         -o-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
    width: 80px;
}

li.hidden {
    opacity: 0;
    width: 0;
}
...

JS

$(document).ready(function() {
    $('li').click(function() {
        var $item = $(this),
            parentId = $item.parent().attr('id'),
            newParentSelector = (parentId == 'list1') ? '#list2' : '#list1';


        $item.addClass('hidden');

        $item.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
            $item.appendTo(newParentSelector);
            $item.removeClass('hidden');
        });

    });
});

LI項目にクラス.hiddenが追加されると、トランジション アニメーションが期待どおりに実行されます。LI アイテムが別のリストに移動され、.hidden クラスが削除されると、トランジション アニメーションは実行されませんが、アイテムは正しい不透明度と幅で表示されます。

奇妙なことは、アイテムの「非表示」クラスを手動で切り替えると (つまり$('#item2').toggleClass('hidden');、両方fade-inとfade-outアニメーションが実行されることです)。

この問題は、このfiddleで示されています。

4

1 に答える 1

1

これが機能する理由を説明することはできませんが、タイムアウトを設定すると (1ms であっても) 機能するようです。

フィドルを参照してください。

関連コード

$item.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
    $item.appendTo(newParentSelector);
    setTimeout(function() {
           $item.removeClass('hidden');
    }, 1);
});

編集 1: テスト後、Chrome と FF は期待どおりにこれを処理しているようですが、IE10 は望んでいません。約 50 のタイムアウトを設定するとうまくいくはずです。

フィドルを更新しました。

$item.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
    $item.appendTo(newParentSelector);
    setTimeout(function() {
            $item.removeClass('hidden');
    }, 50);
});
于 2013-05-19T11:28:03.043 に答える