作為jQuery DOM操作的結果的CSS轉換

Question

如何通過使用jQuery移動DOM中的元素來確保CSS轉換？

依賴於最后子狀態選擇器時，將忽略以下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等）中添加一個類似'last'的類，它應該依次觸發轉換，因為元素的CSS屬性已經從它的無類狀態改變了。 （你已經想到了......）