親要素を変更するときに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 { 
 
     \t 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コールを使用することができます。また、2つのクラスを使用しているため、各インターバル間で切り替えると、別々のadd/removeClass呼び出しの代わりにtoggleClass("in-a in-b")を使用できます。

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>