ios Safari translate 動畫失效

時間 2019-11-17

原文原文鏈接

問題描述：css

在ios端的Safari中，使用css3的 animation + translate 實現圖片從屏幕外滑進屏幕內動畫時，發現動畫不起做用，而是直接閃現。html

<!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

分析過程ios

1. 刪除圖片，直接對div添加動畫，動畫正常css3

2.img標籤外包一層div，而後給div添加動畫，動畫失效web

3.修改translate的初始值爲200px，動畫正常ide

4.修改translate的初始值爲202px，動畫失效動畫

5.爲div都增長border，動畫失效，同時，第二個div是沒有圖片的，它的動畫也失效。 spa

6.將圖片設爲div的背景，動畫失效調試

作出判斷：code

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% 後動畫才展現出來，就沒有仔細去調試。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。