JS：表示を変更した後にdivをアニメ化する

Question

2つのdivがあり、onCLick関数が1番目に設定されます。display: none; 2番目display: block;そして1番目のdivに置き換えられた後に2番目のdivの回転をアニメーションしたいとします。悲しいことに、アニメーションが機能しないのは、その機能だけです。

HTML：

<div class="more-click">   
    <img src="img/arrow-more.png"> 
</div> 
<div class="more-click-back"> 
    <img src="img/arrow-more.png"> 
</div> 

CSS：

.more-click{ 
display: block; 
transform: rotate(270deg); 
} 
.more-click-back{ 
display: none; 
transition-duration: .5s; 
transform: rotate(270deg); 
} 

JS：

$(".more-click img").click(function() { 
     $(".more-click").css('display', 'none'); 
     $(".more-click-back").css('display', 'block'); 
     $(".more-click-back").css('transform', 'rotate(90deg)'); 
}); 

誰が、なぜ私の0.5秒のアニメーションが動作していない知っていますか？ありがとう！

$(".more-click-back").css('display', 'block'); 

を、アニメーションは次のように正常に動作しますので、それがフェードインします：

Answer 1

あなたはこれを変更する必要があり、私はあなたのコードでこの編集を作り、あなたがそれをここで見ることができます

$(".more-click-back").fadeIn(300) 

https://jsfiddle.net/IA7medd/swuogr4y/