CSS - Übergang funktioniert nicht, wenn ich das Elternelement ändere

Question

Ich versuche, einige Elementstile über CSS zu ändern und erwarte bestimmte Übergänge, aber ich kann sie nicht zum Laufen bringen, wenn ich sie zu einem anderen Elternelement verschiebe (was in meine Bewerbung).

ist hier ein minimales Beispiel:

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>

Wie kann ich dieses Problem lösen? Ich muss Elemente zu einem anderen übergeordneten Element verschieben, einige Stile ändern und sicherstellen, dass die Übergänge ordnungsgemäß funktionieren.

Answer 1

Sie schalten die Klassen zu schnell um, das DOM muss auf die neue Struktur aktualisiert werden, bevor es einen neuen Übergang durchführt.

Sie können setTimeout Anruf mit einer sehr kurzen Verzögerung wie 10 verwenden, um dies zu erreichen. Und da Sie nur zwei Klassen verwenden und zwischen den einzelnen Intervallen wechseln, können Sie einfach toggleClass("in-a in-b") verwenden, statt separate add/removeClass-Aufrufe auszuführen.

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

Demo

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>