我有几个带有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时会触发动画。停止时发生的动画具有相同的原因,因为克隆体然后被附加到其新位置,再次触发文档的重排。