开发者社区> 问答> 正文

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)包裹起来结果就没问题了。。还是不知道是什么原因

展开
收起
小旋风柴进 2016-05-30 11:35:01 6391 0
1 条回答
写回答
取消 提交回答
  • 因为show和后面的animate都是修改style,其实是一次渲染的,所以不会有动画,解决方法是,show后面延迟一下,强制分成两次渲染,比如:

    $(...).show();
    setTimeout(function(){
      $(...).css(...);
    2019-07-17 19:20:18
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载