博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
transition动画z-index层级失效问题
阅读量:6265 次
发布时间:2019-06-22

本文共 729 字,大约阅读时间需要 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级上面来一个级别提升;

转载于:https://juejin.im/post/5c6fa1be6fb9a049ee8110f3

你可能感兴趣的文章
Maven学习总结(14)——Maven 多模块项目如何分工?
查看>>
python 参数
查看>>
linux 源码安装详解
查看>>
字符压缩题目
查看>>
frog-jump
查看>>
js实例:验证只能输入数字和一个小数点
查看>>
vue-cli脚手架安装和webpack-simple模板项目生成
查看>>
多媒体杂志
查看>>
python从入门到大神---3、浮光掠影python3语法
查看>>
Java中为什么要使用线程池?如何使用?
查看>>
Openstack Nova 源码分析 — RPC 远程调用过程
查看>>
Python 小知识点(9)--反射
查看>>
.NET4.0的并行调试窗(Parallel Tasks)如何调出
查看>>
SpringMVC 入门
查看>>
20135108李泽源 Java实验一
查看>>
创建元素
查看>>
Git远程操作
查看>>
JS获取URL中参数值
查看>>
java 项目的jar 反编译后 压缩回去 命令
查看>>
单链表及简单应用
查看>>