如何使用CSS3转换(或任何其他方式)使jQuery Sortable的行为更像iOS中的列表重新排序,其中列表项在拖动时平滑地动画,因此项目会从你拖动的方式?动画jQueryUI可排序使用CSS3转换
[编辑把它变成一个常见问题,节省时间,其他人谁想要这出]
如何使用CSS3转换(或任何其他方式)使jQuery Sortable的行为更像iOS中的列表重新排序,其中列表项在拖动时平滑地动画,因此项目会从你拖动的方式?动画jQueryUI可排序使用CSS3转换
[编辑把它变成一个常见问题,节省时间,其他人谁想要这出]
https://gist.github.com/801570展示了如何顺利通过动画拖动jQuery Sortable。当您拖动时,项目会变得不顺畅。它使用CSS3 Transitions,效果正是我正在寻找的。很酷。
下面的代码:
的jsfiddle:
HTML:
<style name="impostor_size">
.marker + li { border-top-width:0px; }
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
CSS:
body { color:white; font-family:Helvetica, sans-serif; padding: 10px}
ul { float:left; width:300px; overflow:hidden; border-radius:6px; }
li { display:block; position:relative; padding:12px 6px; z-index:1; margin:5px 20px; }
li:after { background:#18629D; display:block; position:absolute; height:100%; width:100%; top:0px; left:0px; content:' '; border-radius:6px; z-index:-1; }
li { -moz-transition:border-top-width 0.1s ease-in; -webkit-transition:border-top-width 0.1s ease-in; border-top:0px solid rgba(0,0,0,0); }
.marker { opacity:0.0; }
脚本:
var stylesheet = $('style[name=impostor_size]')[0].sheet;
var rule = stylesheet.rules ? stylesheet.rules[0].style : stylesheet.cssRules[0].style;
var setPadding = function(atHeight) {
rule.cssText = 'border-top-width: '+atHeight+'px';
};
$('ul').sortable({
'placeholder':'marker',
'start':function(ev, ui) {
setPadding(ui.item.height());
},
'stop':function(ev, ui) {
var next = ui.item.next();
next.css({'-moz-transition':'none', '-webkit-transition':'none', 'transition':'none'});
setTimeout(next.css.bind(next, {'-moz-transition':'border-top-width 0.1s ease-in', '-webkit-transition':'border-top-width 0.1s ease-in', 'transition':'border-top-width 0.1s ease-in'}));
}
});
li有什么需要:在这之后? –
我对上述所有通过采取排序API中的优势“变”功能的改善。这是代码。看看下面的提琴看到所需的CSS。
$('ul').sortable({
placeholder:'marker',
distance: 15,
cursor: 'move',
revert: 200,
start:function(ev, ui) {
$(".marker").css({"height": "0px"});
console.log("start");
},
change:function(ev, ui) {
$(".marker").css({"height": "0px"});
setTimeout(function(){
$(".marker").css({"height": "40px"});
},10);
} });
你可以看到完整的代码示例here
下面是[史蒂夫·桑德森(http://blog.stevensanderson.com/2013/03/15/animating另一个例子-lists-with-css-3-transitions /) - 使用CSS 3转换动画列表 –
[UI的可排序列表的动画转换]的可能重复(http://stackoverflow.com/questions/12942520/animate-transitions-for- uis-sortable-list) –