jQuery UI sortable wyzwala animację css3 na sortowanie

Question

Mam kilka sortables z animacjami klatek CSS3 zdefiniowanymi na nich przez klasę. Przy sortowaniu, zauważyłem dziwne zachowanie jak widać w 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%); 
    } 
} 

Inicjowanie jQuery sortable.

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

animacja wyzwala na rodzaj start i stop, natomiast klasa animacja nie jest ponownie zastosować. Wygląda na to, że nastąpił jakiś proces zmian powodowany przez modyfikację DOM przez jQuery. Ale w jaki sposób aktywuje animację i czy można jej uniknąć? Celem jest brak animacji podczas sortowania, przy zachowaniu klasy.

Odpowiedź: Ma to sens, ponieważ pozycja jesteśmy przeciągając wokół jest tylko klonem, to ożywia na start bo włóż clone do DOM. Animacja pojawiająca się na stop ma tę samą przyczynę, ponieważ klon jest następnie dołączany do nowej pozycji, ponownie wyzwalając ponowne wlanie dokumentu.

Answer 1

myślę, że trzeba to usunąć klasę slideLeft z elementów li Po zakończeniu animacji.Coś jak:

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

});

Mam nadzieję, że będę przydatny.

PD.

Podczas sortowania listy, jquery-ui zmienia DOM, ponieważ element jest usuwany i wstawiany ponownie. Ponadto jquery-ui tworzy kolejny element o takich samych właściwościach, jak symbol zastępczy, pokazujący miejsce do przeniesienia elementu.

Następnie, jeśli nie usunąć klasę slideLeft, animacja będzie grać przy każdej zmianie na liście

Answer 2

Twoje forsowanie symbolu zastępczego jest widoczne za pomocą! Important.

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

Jeśli wglądu w jfiddle zobaczysz, że ui-sortable-zastępczy ma inline

style="visibility:hidden;" 

który jest coraz nadpisane przez ostatniego wiersza w css powyżej. Możesz go ponownie zastąpić czymś podobnym:

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

    } 

lub coś podobnego. Spowoduje to, że część po lewej stronie pozostanie niewidoczna i po prostu wyświetli część animacji (nie wiem, czy tego chcesz, czy nie).

Answer 3

Można dodać ten poniżej skrypcie

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

Ten skrypt czeka na animację, aby zakończyć (1000 ms), a następnie usuwa klasę slideLeft od pierwszego list-item. ALE jeśli jesteś szybki i wybierzesz pierwszy wiersz w ciągu sekundy, problem będzie nadal występował. Więc co mogę zrobić, to owinąć wokół limitu czasu skryptu funkcją:

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

to czeka drugi (1000ms), aby lista sortable. Po tym czasie usuwa także klasę slideLeft, aby zapobiec dalszej animacji. Minusem jest to, że nie możesz posortować listy przez 1 sekundę.

Oto pełna skrzypce oparty na skrypcie:

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

Jeśli chcesz zachować klasę, ale trzeba zapobiec animację, można zrobić:

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

I dobrze jest umieścić w CSS:

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

Twój roboczego skrzypce: http://jsfiddle.net/Lvnzffoh/1/