filter在ios不兼容 js_jq的animate属性不支持transform 和 ios手机上box-shadow兼容性问题 和...
一、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。
.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();
});