使用 CSS3 过渡动画 jQueryUI 可排序

Posted 2023-05-08

【中文标题】使用 CSS3 过渡动画 jQueryUI 可排序

【英文标题】：Animating jQueryUI Sortable using CSS3 transitions

【发布时间】：2012-10-27 01:07:22

【问题描述】：

如何使用 CSS3 过渡（或任何其他方式）使 jQuery Sortable 更像 ios 中的列表重新排序，其中列表项在拖动时平滑地动画化，因此项目在您拖动时匆匆离开?

[编辑以将其变成常见问题解答并为其他想要解决此问题的人节省时间]

【问题讨论】：

这是Steve Sanderson 的另一个例子 - 使用 CSS 3 过渡动画列表

Animate transitions for UI's sortable list的可能重复

【参考方案1】：

https://gist.github.com/801570 展示了如何使用jQuery Sortable 平滑地为拖动设置动画。当您拖动时，物品会匆匆离开。它使用CSS3 Transitions，效果正是我想要的。很酷。

代码如下：

JSFIDDLE：

http://jsfiddle.net/LTWMp/

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:after here需要什么？

这很好用！但它必须如此hacky，这真是太可惜了。

【参考方案2】：

通过利用可排序 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://jsfiddle.net/LTWMp/284/