JS：更改显示后对div进行动画处理

Question

我有2个div，onCLick函数将设置第一个display: none; 第二display: block; 而且我想在第二个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.5s动画不起作用吗？ 谢谢！

Answer 1

您应该更改此：

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

并使其淡入，以便动画可以像这样正常工作：

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

我在您的代码上进行了此编辑，您可以在这里查看https://jsfiddle.net/IA7medd/swuogr4y/