JS: Animate div nach der Änderung seiner Anzeige

Question

Ich habe 2 divs, onCLick Funktion wird 1. display: none; 2. display: block; UND ich möchte die Rotation der 2. div nach dem 1. ersetzen animieren. Leider funktioniert die Animation nicht, sondern nur diese Funktion.

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)'); 
}); 

Weiß jemand, warum meine 0,5s Animation nicht funktioniert? Vielen Dank!

Answer 1

sollten Sie dies ändern:

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

und verblassen in machen, damit die Animation fein funktioniert wie folgt aus:

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

ich diese bearbeiten auf dem Code gemacht und Sie können es hier sehen https://jsfiddle.net/IA7medd/swuogr4y/