Question

我有两个元素列表，我希望通过简单的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类被删除时，过渡动画没有运行，但项目出现时具有正确的不透明度和宽度。

更奇怪的是，当我切换隐藏的＆＃39;手动（即$('#item2').toggleClass('hidden');）项目的类别同时运行fade-in和fade-out个动画。

这个问题在fiddle中得到了证明。

Answer 1

我无法向你解释为什么这有效，但设置超时（即使它是1ms）似乎可以使它工作。

请参阅fiddle。

相关代码

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

编辑1：经过测试，Chrome和FF似乎正如我们所期望的那样处理这个问题，但IE10并不想这样做。将超时设置为50应该可以解决问题。

Updated fiddle

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

在将元素移动到不同父级之后，CSS转换未运行

1 个答案: