Problem mit CSS-Übergang auf Element mit jQuery gezeigt

Question

Ich habe ein einfaches Toggle-Plus-Zeichen, das ein div zu erscheinen und in ein X drehen soll, die dann angeklickt werden kann, um das div zu schließen.

Alles funktioniert wie geplant, außer es gibt keinen fließenden Übergang in der Rotation des Plus, es erscheint nur schon gedreht.

Wenn ich die display:none aus dem #showbox Div entfernen und $("#showbox").show() entfernen, funktioniert die Animation/Übergang. Es ist nur, wenn das div ist versteckt und dann mit .show() gezeigt, dass es nur dreht, ohne zu animieren.

Ich bin sicher, dass ich dieses Problem zu umgehen denken kann, ich frage mich nur, wenn jemand erklären kann, warum dies könnte

$("#togglebox").click(function() { 
 
    $("#showbox").show(); 
 
    $("#showbox .toggleplus").toggleClass("togglex"); 
 
});

#showbox { 
 
    background: #000; 
 
    width: 500px; 
 
    height: 200px; 
 
    display: none; 
 
} 
 

 
.toggleplus { 
 
    width: 30px; 
 
    height: 30px; 
 
    transition: all .5s; 
 
    color:#111; 
 
} 
 

 
#showbox .toggleplus { 
 
color:#FFF; 
 
} 
 

 
.togglex { 
 
    transform: rotate(-46deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="togglebox"> 
 
    <p>LEARN MORE</p> 
 
    <div class="toggleplus">+</div> 
 
</div> 
 

 
<div id="showbox"> 
 
    <div class="toggleplus">+</div> 
 
    <p>Blah Blah Blah</p> 
 
</div>

Answer 1

Das Problem ist, dass das UI-Updates geschehen in ein anderer Thread als der, in dem JavaScript ausgeführt wird und dieser UI-Thread schneller ausgeführt wird als der JS.

Sie können dies beheben, indem Sie eine kurze Verzögerung hinzufügen. Dadurch wird die Aktualisierung der Benutzeroberfläche erst nach Abschluss der Funktion erzwungen.

$("#togglebox").click(function(){ 
 
     $("#showbox").show(); 
 
     setTimeout(function(){ 
 
      $("#showbox .toggleplus").toggleClass("togglex"); 
 
     },20); 
 
    });

#showbox { 
 
    \t background:#fff; 
 
    \t width:500px; 
 
     height:200px; 
 
    \t display:none; 
 
    } 
 
    
 
    .toggleplus { 
 
    \t float:right; 
 
    \t width:30px; 
 
    \t height:30px; 
 
    \t transition:all .5s; 
 
    } 
 
    
 
    .togglex { 
 
    \t transform: rotate(-46deg); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
    <div id="togglebox"> 
 
     <p>LEARN MORE</p> 
 
     <div class="toggleplus"></div> 
 
    </div> 
 
    \t 
 
    <div id="showbox"> 
 
     <div class="toggleplus">+</div> 
 
     <p>Blah Blah Blah</p> 
 
    </div>

Ein anderer Weg, um dies mit JQuery zu erreichen, ist die Zugabe des Rotationsklassencode zu haben als ein Rückruf an den show() Verfahren hinzugefügt:

$("#togglebox").click(function(){ 
 
     // Passing a function to the show method sets it up as a callback to 
 
     // be executed after the show() animation is complete. 
 
     $("#showbox").show(function(){ 
 
      $("#showbox .toggleplus").toggleClass("togglex"); 
 
     }); 
 
    });

#showbox { 
 
    \t background:#fff; 
 
    \t width:500px; 
 
     height:200px; 
 
    \t display:none; 
 
    } 
 
    
 
    .toggleplus { 
 
    \t float:right; 
 
    \t width:30px; 
 
    \t height:30px; 
 
    \t transition:all .5s; 
 
    } 
 
    
 
    .togglex { 
 
    \t transform: rotate(-46deg); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
    <div id="togglebox"> 
 
     <p>LEARN MORE</p> 
 
     <div class="toggleplus"></div> 
 
    </div> 
 
    \t 
 
    <div id="showbox"> 
 
     <div class="toggleplus">+</div> 
 
     <p>Blah Blah Blah</p> 
 
    </div>