3

我有两个元素列表，我想通过简单的 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动画都会运行。

这个问题在这个小提琴中得到了证明。

4

1 回答 1

1

我无法向您解释为什么会这样，但设置超时（即使是 1 毫秒）似乎可以让它发挥作用。

见小提琴。

相关代码

$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 回答