javascript - 作为 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 属性从它是无类状态。 (你已经想通了......)