ios Safari translate 动画失效

问题描述：

在ios端的Safari中，使用css3的 animation + translate 实现图片从屏幕外滑进屏幕内动画时，发现动画不起作用，而是直接闪现。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Safari</title> 
    <meta charset="UTF-8">
    <style>
    @-webkit-keyframes InFromLeft{
        0%{
            -webkit-transform:translate(-2000px,0)
        }
        100%{
            -webkit-transform:translate(0,0)
        }
    }
    .abs{
        position:absolute;
    }
    .div{
        width:100px;
        height:100px;
        background:#ccc;
        border: 2px solid #dd2;
        left:100px;
        top:100px;
        -webkit-animation: InFromLeft .5s ease .5s both;
    }
    .div2{
        top:300px;
    }
    .divImg{
        width:100px;
        height:100px;
        left:0;
        top:0;
    }
    .div3{
        top:500px;
    }
    </style>
</head>
<body>
<img src="//pic.cnblogs.com/face/sample_face.gif" alt="" class="abs div" />
<div class="abs div div2">
</div>
<div class="abs div div3">
    <img src="//pic.cnblogs.com/face/sample_face.gif" alt="" class="abs divImg">
</div>
</body>
</html>
View Code

 

分析过程

1. 删除图片，直接对div添加动画，动画正常

 

2.img标签外包一层div，然后给div添加动画，动画失效

 

3.修改translate的初始值为200px，动画正常

 

4.修改translate的初始值为202px，动画失效

 

5.为div都增加border，动画失效，同时，第二个div是没有图片的，它的动画也失效。 

 

6.将图片设为div的背景，动画失效

 

做出判断：

iOS端的Safari在渲染的时候，会将比较复杂的非可视区域的对象先不渲染。这样导致需要将可视区域外的对象（比如图片）移动到可视区域内时，没有可以移动的对象，动画失效。

 

曲线救国方案：

1. 先将需要的移动的对象初始化在可视区域内，并设置透明度为 0。注意这里不能设置 display:none ，因为 display:none 同样会导致对象不渲染。

2. 将原有动画变为两个过程，并且时间加倍，第一步，先移除可视区域，设置透明度为 1；第二步，移进可视区域，透明度为 1；

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Safari</title> 
    <meta charset="UTF-8">
    <style>
    @-webkit-keyframes InFromLeft{
        0%{
            opacity: 0;
            -webkit-transform:translate(0,0)
        }
        50%{
            opacity: 1;
            -webkit-transform:translate(-2000px,0)
        }
        100%{
            opacity: 1;
            -webkit-transform:translate(0,0)
        }
    }
    .abs{
        position:absolute;
    }
    .div{
        width:100px;
        height:100px;
        background:#ccc;
        border: 2px solid #dd2;
        left:100px;
        top:100px;
        -webkit-animation: InFromLeft 1s ease .5s both;
    }
    .div2{
        top:300px;
    }
    .divImg{
        width:100px;
        height:100px;
        left:0;
        top:0;
    }
    .div3{
        top:500px;
    }
    </style>
</head>
<body>
<img src="//pic.cnblogs.com/face/sample_face.gif" alt="" class="abs div" />
<div class="abs div div2">
</div>
<div class="abs div div3">
    <img src="//pic.cnblogs.com/face/sample_face.gif" alt="" class="abs divImg">
</div>
</body>
</html>
View Code

 

曲线救国方案修改过程中，初步考虑将移出的过程设置为 1% ，结果发现还是达不到效果，后来直接调整为 50% 后动画才展示出来，就没有仔细去调试。

 

posted @ 2016-10-18 18:24  不下  阅读(2443)  评论(0)  编辑  收藏  举报