更改父元素時，CSS過渡不起作用

Question

我正在嘗試通過CSS修改某些元素樣式，並且希望進行某些轉換，但是如果將它們移到另一個父元素（在我的應用程序中是必不可少的），則無法使它們起作用。

這是一個最小的示例：

  var a = $('#a'), b = $('#b'), box = $('.box'), current = 0; setInterval(function() { if(++current % 2 == 0) { box.appendTo(b).addClass('in-b').removeClass('in-a'); } else { box.appendTo(a).addClass('in-a').removeClass('in-b'); } }, 3000); 

  #a, #b { position: absolute; left: 0; top: 0; } .box { background-color: #50A000; transition: width 0.5s, height 0.5s; position: absolute; top: 0; left: 0; width: 50px; height: 50px; } .box.box.in-a { height: 50px; width: 50px; } .box.box.in-b { height: 80px; width: 80px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="a"> <div class="box in-a"> Hello world! </div> </div> <div id="b"></div> 

我該如何解決這個問題？ 我需要將元素移動到其他父對象，更改某些樣式，但仍要確保過渡工作正常。

Answer 1

您切換類的速度太快，DOM需要先更新到新結構，然后才能進行新的過渡。

您可以將setTimeout調用使用非常短的延遲（例如10）來完成。 並且由於只使用了兩個類並在每個間隔之間切換，所以可以只使用toggleClass("in-a in-b")而不是單獨進行add / removeClass調用。

setTimeout(()=>box.toggleClass("in-a in-b"),10);

演示版

 var a = $('#a'), b = $('#b'), box = $('.box'), current = 0; setInterval(function() { if (++current % 2 == 0) { box.appendTo(b); } else { box.appendTo(a); } setTimeout(() => box.toggleClass("in-a in-b"), 10); }, 3000); 

 #a, #b { position: absolute; left: 0; top: 0; } .box { background-color: #50A000; transition: width 0.5s, height 0.5s; position: absolute; top: 0; left: 0; width: 50px; height: 50px; } .box.box.in-a { height: 50px; width: 50px; } .box.box.in-b { height: 80px; width: 80px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="a"> <div class="box in-a"> Hello world! </div> </div> <div id="b"></div>