Question

我有一个带有可排序小部件的页面，排序工作得很好，所以我想我会用一些CSS3动画来修饰它。动画有效，但只有一种方式！

当项目被拖动时，动画略微倾斜，项目按照CSS进行动画处理。但是，当一个项目被删除时，我无法让动画反转，所以当它被删除时没有动画，并且该项目只是卡入到位。

如何在删除项目时获取动画？

可以在代码下面的JSFiddle链接中尝试运行代码。

HTML：

<div class="Container">
    <div class="Item">1</div>
    <div class="Item">2</div>
    <div class="Item">3</div>
    <div class="Item">4</div>
    <div class="Item">5</div>
</div>

CSS：

.Container > .Item {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    background-color: #ccc;
    margin: 0 10px 10px 0;
    padding: 20px 40px;
    border-radius: 5px;
    transition: transform 0.5s;
}

.Container > .Item[class~=ui-sortable-helper] {
    transform: rotate(10deg);
}

JSFiddle：http://jsfiddle.net/GTHvidsten/jjucxzdk/

Answer 1

transitionend事件的ui-sortable-helper事件已更新，已调整选择器class css transform .Container属性{而不是$(document).ready(function() { $(".Container").sortable({ cursor : 'move', revert : true }) .find(".Item[class~=ui-sortable-helper]") .on("transitionend", function(e) { $(this).css("transform", "rotate(0deg)") }); }); < / p>

尝试使用transitionend事件

<html>
<head>
<title>Title of Webpage</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
<a id="area1" class="area"></a>
<a id="area2" class="area"></a>
<a id="area3" class="area"></a>
<img src="logoandmenu.jpg" usemap="#map" />
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Vampita -->
<area shape="rect" coords="474,0,643,72" href="about_us.html" />
<area shape="rect" coords="644,0,813,72" href="fore_sale.html" />
<area shape="rect" coords="814,0,984,72" href="sold.html" />
</map>
<img src="background2.jpg">
</div>
</body>
</html>

jsfiddle http://jsfiddle.net/jjucxzdk/2/

jQuery UI可以使用CSS3动画进行排序

1 个答案: