Question

我有2个div，onCLick函数将设置1st display: none; 2nd display: block;并且我想在它替换1st之后设置第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.5s动画不起作用？谢谢！

Answer 1

你应该改变这个：

1second

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

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

我对您的代码进行了此修改，您可以在此处查看https://jsfiddle.net/IA7medd/swuogr4y/

JS：改变它的显示后动画div

1 个答案: