jQuery UI可排序在排序时触发CSS3动画。

Question

jQuery UI可排序在排序时触发CSS3动画。

javascriptjqueryjquery-uijquery-ui-sortable

8

我有几个带有CSS3关键帧动画的可排序元素。在排序时，我注意到了如这个Fiddle中所示的奇怪行为。

.slideLeft {
  animation-name: slideLeft;
  -webkit-animation-name: slideLeft;    

  animation-duration: 1s;   
  -webkit-animation-duration: 1s;

  animation-timing-function: ease-in-out;   
  -webkit-animation-timing-function: ease-in-out;       

  visibility: visible !important;   
}

@keyframes slideLeft {
  0% {
     transform: translateX(150%);
  }
  50%{
    transform: translateX(-8%);
  }
  65%{
    transform: translateX(4%);
  }
  80%{
    transform: translateX(-4%);
  }
  95%{
    transform: translateX(2%);
  }         
  100% {
    transform: translateX(0%);
  }
}

正在启动jQuery排序功能。

$(function() {
  $( "#sortable" ).sortable();
});

动画在排序开始和结束时触发，而动画类没有被重新应用。似乎是由于jQuery修改了DOM引起了某种重排。但是它如何保持触发动画，并且可以避免吗？目标是在排序时完全没有动画，同时保持类。

答案：这很有道理，因为我们拖动的项目只是一个克隆体，在插入克隆体到DOM时会触发动画。停止时发生的动画具有相同的原因，因为克隆体然后被附加到其新位置，再次触发文档的重排。

- Tim

4个回答

3

您使用 !important 强制使占位符 li 可见。

    .slideLeft {
        animation-name: slideLeft;
        -webkit-animation-name: slideLeft;  

        animation-duration: 1s; 
        -webkit-animation-duration: 1s;

        animation-timing-function: ease-in-out; 
        -webkit-animation-timing-function: ease-in-out;     

        visibility: visible !important; 
    }

如果您在jfiddle中进行检查，您会发现ui-sortable-placeholder具有内联样式。

    style="visibility:hidden;"

这段文字被上面CSS中的最后一行覆盖了。你可以使用以下方式重新覆盖它：

    .ui-sortable-placeholder{
         visibility: hidden !important;    

     }

或类似的东西。这将使幻灯片左侧也不可见，只显示动画的“弹跳”部分（不确定您是否需要这样）。

- nurdyguy

我明白你的意思，但只有在第二次排序后才能正常工作。为什么会这样？看一下这个分支 Fiddle。注意：我没有看到任何反弹，你能澄清一下你看到了什么吗？在这个版本中根本没有动画，这很好。 - Tim

你在看哪个"项目"? 注意，在这个演示中只有 "项目1" 有 .slideLeft class，所以只有它会显示该动画。其他的可以排序但不会显示动画，因为它们没有附加类。在你链接的演示中，“项目1”运行正确。要修复它，请将class =“ slideLeft”添加到其余的li。 - nurdyguy

你说得对，我完全忽略了那一点。但这意味着它并没有解决动画触发的问题。带有 slideLeft 的项目在排序时不应该进行动画处理。你能提供一个 Fiddle 来演示你回答中的这部分内容吗：_这将使滑动到左边的部分也变为不可见，并且仅显示动画的“弹跳”部分_？ - Tim

这是你想要的吗？http://jsfiddle.net/xfxjp0th/2/ 我只是将类添加到所有li中，并从两个关键帧部分中删除了顶部行。顶部行显示150％，这就导致了滑动效果。较小的百分比处理反弹部分。 - nurdyguy

1

如果您想保留类(class)，但需要防止动画效果，可以执行以下操作：

$("#sortable").sortable({
    beforeStop: function( event, ui ) {
       $(ui.item).css("animation", "none");
    }
});

"并且在你的CSS中加入以下代码是很好的：

"

#sortable .ui-sortable-placeholder { visibility: hidden !important; animation: none; }

你的代码演示链接：http://jsfiddle.net/Lvnzffoh/1/

- Buzinas

0

你可以在你的脚本下面添加这个

setTimeout(function(){
    $( "#sortable" ).children("li").first().removeClass('slideLeft');
}, 1000);

这个脚本会等待动画结束（1000毫秒），然后从第一个列表项中删除类slideLeft。但是，如果你很快地选择第二行中的第一行，问题仍然存在。所以我会将你的脚本包装在超时函数周围：

setTimeout(function(){
    $(function() {
        $( "#sortable" ).sortable();
    });
    $( "#sortable" ).children("li").first().removeClass('slideLeft');
}, 1000);

这个函数会等待一秒钟（1000毫秒）以使列表可排序。在那一秒钟之后，它还会移除类slideLeft，以防止持续的动画效果。缺点是您不能在1秒内对列表进行排序。

这是基于您的脚本的完整演示：

setTimeout(function() {
  $(function() {
    $("#sortable").sortable();
  });
  $("#sortable").children("li").first().removeClass('slideLeft');
}, 1000);

#sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}
#sortable li {
  margin: 0 3px 3px 3px;
  padding: 0.4em;
  padding-left: 1.5em;
  font-size: 1.4em;
  height: 18px;
}
#sortable li span {
  position: absolute;
  margin-left: -1.3em;
}
.slideLeft {
  animation-name: slideLeft;
  -webkit-animation-name: slideLeft;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  visibility: visible !important;
}
@keyframes slideLeft {
  0% {
    transform: translateX(150%);
  }
  50% {
    transform: translateX(-8%);
  }
  65% {
    transform: translateX(4%);
  }
  80% {
    transform: translateX(-4%);
  }
  95% {
    transform: translateX(2%);
  }
  100% {
    transform: translateX(0%);
  }
}
@-webkit-keyframes slideLeft {
  0% {
    -webkit-transform: translateX(150%);
  }
  50% {
    -webkit-transform: translateX(-8%);
  }
  65% {
    -webkit-transform: translateX(4%);
  }
  80% {
    -webkit-transform: translateX(-4%);
  }
  95% {
    -webkit-transform: translateX(2%);
  }
  100% {
    -webkit-transform: translateX(0%);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" rel="stylesheet"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet"/>
<ul id="sortable">
  <li class="ui-state-default slideLeft"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

- Starfish

不会放弃这个，因为我需要这个类存在。我正在寻找解释为什么它一直触发的答案。 - Tim

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jorgesuarezch · Accepted Answer

我认为，你需要在动画完成后从 li 元素中移除 slideLeft 类。类似于：

完成动画后，从 li 元素中移除 slideLeft 类。

$(function(){
    $( "#sortable" ).sortable();
    //one second later the slideLeft class  is removed from each li.
    window.setTimeout(function(){
      $( "#sortable" ).find(".slideLeft").removeClass("slideLeft");
    }, 1000)

我希望能够帮到您。

附注：

在对列表进行排序时，jquery-ui 会更改 DOM，因为元素被删除并重新插入。此外，jquery-ui 还创建了另一个具有与占位符相同属性的元素，显示要移动元素的位置。

如果不删除 slideLeft 类，则动画将在列表中每次更改时播放。