jQueryで表示された要素のCSSトランジションの問題

Question

divをトリガしてXに回転させ、divを閉じるためにクリックすることができるシンプルなトグル+記号があります。

プラスの回転にスムーズな遷移がないことを除いて、すべてが計画どおりに動作しますが、回転したように見えます。

#showbox divからdisplay:noneを削除して$("#showbox").show()を削除すると、アニメーション/トランジションが機能します。 divが非表示になっていて.show()と表示されていても、アニメーションなしで回転するだけです。

私は誰もがこれが起こっかもしれない理由を説明することができる場合、私はちょうど思ったんだけど、私は回避策を考えることができると確信してい

$("#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

問題があるというUIの更新でJavaScriptとは異なるスレッドが実行され、UIスレッドはJSよりも速く実行されます。

これを修正するには、短い遅延を追加します。これにより、機能が完了するまでUIが更新されなくなります。

$("#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>

jQueryを使ってこれを達成する別の方法は、回転クラスコードの添加はshow()メソッドへのコールバックとして添加させることである。

$("#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>