jq的animate属性不支持transform 和 ios手机

一、jq的animate属性不支持transform

解决方法,用jq的插件jquery.transit.js

    $('#pano').children().children().transition({
         'transform':'translateZ(479.587px) matrix3d(-0.984808, -0.122788, 0.122788, 0, 0, -0.707107, -0.707107, 0, -0.173648, 0.696364, -0.696364, 0, 0, 0, 0, 1) translate(207px, 368px)'
    }, 2000)

二、ios手机上box-shadow兼容性问题

要做一个眨眼睛的动画，黑色区域用box-shadow实现，在iphone7plus上没有眨眼睛效果即直接是没有阴影（透明的）当时box-shadow的spread（阴影尺寸）是2000px，查的资料慢慢减小属性spread （阴影尺寸）；直到spread 的值是530px，眨眼动画才兼容了iphone7plus。

    
    <div class="main">
        <div class="img-container"></div>
    </div>

    .main {
        width: 100%;
        height: 100vh;
        position: relative;
        overflow: hidden;
        position: relative;
    }
    /*在有些手机上，顶部或底部有透明区域闪过，所以用两个黑色的块折叠一下*/
    .main::before {
        content: '';
        display: block;
        width: 100vw;
        height: 1rem;
        background: #000;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 99;
        display: none;
    }
    .main::after {
        content: '';
        display: block;
        width: 100vw;
        height: 1rem;
        background: #000;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 99;
        display: none;
    }
    .img-container {
        position: absolute;
        left: 10%;
        top: calc((100% - 80px) / 2);
        z-index: 1000;
        width: 80%;
        height: 0;
        -webkit-filter: blur(10px);
        -moz-filter: blur(10px);
        -ms-filter: blur(10px);
        filter: blur(10px);
        transform: scale(1.2);
        border-radius: 50%;
        box-shadow: 0 0 0 530px rgba(0, 0, 0, 1);
        -webkit-box-shadow: 0 0 0 530px rgba(0, 0, 0, 1);
    }

    /*实现动画代码*/ 
    $('.img-container').animate({
        width: '80%',
        height: '0',
        left: '10%',
        top: `${document.body.clientHeight / 2}px`
    }).animate({
        width: '80%',
        height: '80px',
        left: '10%',
        top: `${(document.body.clientHeight - 80) / 2}px`
    }).animate({
        width: '80%',
        height: '0',
        left: '10%',
        top: `${document.body.clientHeight / 2}px`
    }).animate({
        width: '200%',
        height: '100%',
        left: '-50%',
        top: '0',
        opacity: '0'
    }, 500, () => {
        $('.main::before').hide();
        $('.main::after').hide();
        $('.img-container').hide();
    });