我有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动画不起作用?谢谢!
答案 0 :(得分:1)
你应该改变这个:
1second
并使其淡入,以便动画可以正常工作:
$(".more-click-back").css('display', 'block');
我对您的代码进行了此修改,您可以在此处查看https://jsfiddle.net/IA7medd/swuogr4y/