css 子元素transition动画为什么无效？
写了个模态窗口的飞入效果
<div id=mask>
<div id=tips>提示</div>
</div>mask{
display: none;
width: 100%;
height: 100%;
z-index: 100;
position: fixed;
background-color: rgba(0, 0, 0, 0.8);
text-align: center;
}
tips{
position: absolute;
background-color: #0b93d5;
width: 600px;
height: 200px;
text-align: center;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -100px;
font-size: 16px;
opacity: 0;
-webkit-transform:scale(3) ;
-moz-transform: scale(3);
-ms-transform: scale(3);
-o-transform:scale(3) ;
-webkit-transition: transform 0.8s ease-in,opacity 0.8s ease-in;
-moz-transition: transform 0.8s ease-in,opacity 0.8s ease-in;
-ms-transition: transform 0.8s ease-in,opacity 0.8s ease-in;
-o-transition: transform 0.8s ease-in,opacity 0.8s ease-in;
transition: transform 0.8s ease-in,opacity 0.8s ease-in;
}
$("#test").click(function(){
$("#mask").show();
$("#tips").css({
'-webkit-transform':'scale(1)',
'-moz-transform': 'scale(1)',
'-ms-transform': 'scale(1)',
'-o-transform':'scale(1)',
'opacity':1
});
将隐藏的mask显示后，tips直接显示动画最后的状态，整个动画的过程跳过了，但是我把mask的display:none去掉，再点击测试，动画效果正常。我在改变css属性前已经把mask显示了，原理上跟我第二种测试方法应该没有任何区别。找不到原因。。谁来解释下。。
更新：
我把
$("#tips").css({
'-webkit-transform':'scale(1)',
'-moz-transform': 'scale(1)',
'-ms-transform': 'scale(1)',
'-o-transform':'scale(1)',
'opacity':1
});
用setTimeout(function(){},0)包裹起来结果就没问题了。。还是不知道是什么原因
展开
收起
1
条回答
写回答
写回答
-
码农|Coder| Pythonista因为show和后面的animate都是修改style，其实是一次渲染的，所以不会有动画，解决方法是，show后面延迟一下，强制分成两次渲染，比如：
$(...).show(); setTimeout(function(){ $(...).css(...); })2019-07-17 19:30:35赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
