jQuery UI sortierbare Auslöser css3 Animation auf Sortierung

Question

Ich habe ein paar sortierbare mit CSS3 Keyframe Animationen über eine Klasse definiert. Beim Sortieren habe ich seltsames Verhalten bemerkt, wie in this 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%); 
    } 
} 

Initiieren jQuery sortierbar gesehen.

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

Die Animation löst auf Art start und stop, während der Animationsklasse nicht erneut angewendet wird. Es scheint so, als ob es eine Art Reflow gibt, der dadurch verursacht wird, dass jQuery das DOM verändert. Aber wie löst es die Animation aus und kann sie vermieden werden? Das Ziel ist, beim Sortieren keine Animation zu haben, während die Klasse beibehalten wird.

Antwort: Es macht Sinn, da das Element wir um sind Schleppen nur ein Klon ist, belebt es auf start, weil wir den Klon auf das DOM einfügen. Die Animation, die unter stop auftritt, hat die gleiche Ursache, da der Klon dann an seine neue Position angehängt wird, was wiederum einen Reflow des Dokuments auslöst.

Answer 1

Ich glaube, Sie brauchen, ist die slideLeft Klasse von li Artikel nach Animation Finish entfernen.Etwas wie:

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

});

Ich hoffe, nützlich zu sein.

PD.

Beim Sortieren einer Liste ändert jquery-ui das DOM, weil das Element entfernt und erneut eingefügt wird. Außerdem erstellt jquery-ui ein weiteres Element mit den gleichen Eigenschaften wie Platzhalter und zeigt den Ort an, an dem das Element verschoben werden soll.

Dann, wenn Sie die slideLeft Klasse nicht entfernen, wird die Animation bei jeder Änderung in der Liste spielen

Answer 2

Sie erzwingen, dass der Platzhalter li sichtbar ist!

.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; 
    } 

Wenn Sie in der jfiddle überprüfen Sie sehen, dass die ui-sortierbar-Platzhalter hat inline

style="visibility:hidden;" 

die oben durch die letzte Zeile in der CSS überschrieben zu werden. Sie können es entweder mit etwas wie überschreiben:

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

    } 

oder etwas ähnliches. Dies macht den linken Teil der Folie auch unsichtbar und zeigt nur den "Bounce" Teil der Animation an (nicht sicher, ob das was du willst oder nicht).

Answer 3

Sie können dies unter Ihrem Skript hinzufügen

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

Dieses Script wartet, bis die Animation (1000 ms) zu beenden und entfernt dann die Klasse slideLeft aus dem ersten Liste Punkt. ABER, wenn Sie schnell sind und die erste Zeile innerhalb der Sekunde auswählen, bleibt das Problem bestehen. Also, was ich tun würde, ist wickeln Ihr Skript um die Timeout-Funktion:

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

Dieser wartet eine Sekunde (1000 ms) auf die Liste sortierbar zu machen. Nach dieser Sekunde wird auch die Klasse slideLeft entfernt, um eine fortlaufende Animation zu verhindern. Nachteil ist, dass Sie die Liste nicht für 1 Sekunde sortieren können.

Dies ist die komplette Geige basiert auf Ihrem Skript:

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>

Answer 4

Wenn Sie die Klasse halten wollen, müssen aber die Animation verhindern, die Sie tun können:

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

Und es ist gut in Ihrem CSS zu setzen:

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

Ihre Geige Arbeits: http://jsfiddle.net/Lvnzffoh/1/