我有两个元素列表,我想通过简单的 CSS 转换将元素从一个列表移动到另一个列表。
逻辑:
- 将
隐藏
类添加到元素以使其淡出(不透明度:0,宽度:0,加上过渡
) - 当过渡结束时将元素移动到另一个列表
- 移除
隐藏
类,使元素淡入
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 中得到了证明。 .
最佳答案
我无法向您解释为什么这行得通,但设置超时(即使是 1 毫秒)似乎可以让它行得通。
参见 fiddle .
相关代码
$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);
});
关于jquery - 将元素移动到不同的父级后,CSS 过渡不运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16633915/