CSS Переходы в результате jQuery DOM Манипуляции

Question

Как я могу гарантировать, что переходы CSS будут возникать в результате перемещения элементов в DOM с помощью jQuery?

Следующий переход CSS игнорируется при использовании селектора состояний последнего дочернего элемента. Стиль обновляется, как ожидалось, но переходного времени к этому стилю не существует.

<ul> 
<li>A</li> 
<li>B</li> 
<li>C</li> 
</ul> 

li { 
    background-color: red; 
} 

li:last-child { 
    background-color: yellow; 
    transition: 3s ease; 
} 

// move list item to last place when clicked 
$('li').click(function() { 
    var parent = $(this).parent(); 
    $(this).detach().appendTo(parent); 
}); 

JSFiddle

Единственный способ, которым я могу показаться, чтобы обеспечить переход будет происходить, чтобы добавить класс после небольшого SetTimeout вызова, а не использовать селектор состояния.

li.activate { 
    background-color: yellow; 
    transition: 3s ease; 
} 

$('li').click(function() { 
    var item = $(this); 
    var parent = item.parent(); 
    item.detach().appendTo(parent);  
    setTimeout(function() { 
    parent.children().removeClass('activate'); 
    item.addClass('activate'); 
    }, 5); 
}); 

JSFiddle

Answer 1

Как вы двигаетесь элементы в дереве DOM, нет визуального состояния перехода из. Однако вы можете использовать анимацию CSS, которая запускается также, создавая новый элемент.

Не нужно сначала .detach().

// move list item to last place when clicked 
 
$('li').click(function() { 
 
    var parent = $(this).parent(); 
 
    $(this).appendTo(parent); 
 
});

li { 
 
    background-color: red; 
 
    height: 50px; 
 
} 
 

 
li:last-child { 
 
    animation: pulse 1s 1; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
@keyframes pulse { 
 
    0% { 
 
    height: 50px; 
 
    } 
 
    100% { 
 
    height: 90px; 
 
    background-color: yellow; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>A</li> 
 
    <li>B</li> 
 
    <li>C</li> 
 
</ul>

В качестве альтернативы вы можете:

1. Переместить элемент (.appendTo)
2. В следующем цикле (setTimeout, requestAnimationFrame и т.д.) добавить имя класса, как «последний ', который должен в свою очередь инициировать переход, поскольку свойства CSS элемента изменились от это состояние без классов. (который вы как бы выяснили уже ...)