transition动画z-index层级失效问题

2,986 阅读2分钟

最近在做一个项目,针对css3动画遇到的问题颇多,想当然,一些由css3引发的手机适配也就来了,做了不少适配,个人觉着anroid手机应该是遇到适配问题最多的一大类手机了,不过在该动画项目上,不得不对android手机佩服的五体投地,完全ko小苹果; 下面就对ios动画做一些问题总结:

rotateY翻转动画,ios系统8以上弹窗被背景遮住问题;

造成该问题原因就是ios手机动画执行渲染的时候zindex层级失效导致弹窗被下面的蒙层遮住;
- 在外层容器上面使用overflow:hidden,完美解决该类问题;

ios动画放大效果,造成手机图片失真模糊不清

解决方案:正常放大scale(1)--scale(1.5)失真了,举个栗子: 如果元素宽高100/100,放到两倍到200/200,那么设置动画原始宽高200*200,使用scale(0.5),动画放大到scale(1)完美解决失真问题; 其实原理吧,也应该很好理解,就像一个胖子放到一个小的屋子里面挤着,忽然把它弄到一个放大一倍的屋子里刚好可以舒服的展示--

当翻转弹窗和弹窗上面放大同时存在的情况下,层级问题

首先弹窗A上面有一个放大元素,当A翻转完毕同时放大到翻转后的B上面,此时放大后的元素消失不见了; 首先,针对该问题,大家可以考虑到另一个问题那就是,元素放大过程中虚,失真同时放大完毕会抖动一下,同时我们使用transform: translate3d(0,0,0); 上述问题,在放大元素外层容器加上translate3d(0,0,1rem);在z级上面来一个级别提升;