【发布时间】：2014-06-24 01:56:55
【问题描述】：
当在移动 Safari/（iPad 和 iPhone）中查看时，我发现很难解决我的投资组合网站 http://robthwaites.com 上的过渡动画渲染缓慢/卡顿的问题。
当您单击我的主页缩略图之一时，.presentation 内容会出现在一些大 div 转换出来的过渡之后（div.workdoor-top 和 div.workdoor-bottom，每个都有一个大三角形灰色背景 SVG） .创建一种 45 度角“擦拭”效果。
过渡由 jQuery .addClass() 提示（将 .hidden 类添加到 div）。在任何桌面浏览器中过渡都非常流畅。
我想我已经按照本文中的提示进行操作，继续转换到 transform: translateX。 http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
我已尝试使用 Chrome 开发工具时间线观察问题可能出在哪里，它显示了在此转换过程中发生了很多重新计算样式，但我不确定这是在哪里发生以及如何解决它。
将 SVG 背景图像更改为 PNG 对性能没有任何帮助。
抱歉，我不能说得更清楚了，但我想知道是否有可能 (a) 使用 Chrome 开发工具时间线（或其他开发工具）来解决问题，以及 (b) 找到解决方法这将在移动设备上流畅地制作动画。
完整的CSS 用于此处的站点。有问题的 DIV 在下面进行转换。
.workdoor-top {
position: absolute;
top: 0%;
right: 0%;
z-index: 30;
width: 2000px;
height: 2000px;
background: url(../portfolio-door-top.svg) top right no-repeat;
-webkit-background-size: cover;
background-size: cover;
pointer-events: none;
-webkit-transition: -webkit-transform 0s ease;
transition: transform 0s ease;
-webkit-transform: translate(0px, 0);
-ms-transform: translate(0px, 0);
transform: translate(0px, 0);
}
.workdoor-top.hidden {
-webkit-transform: translate(2000px, 0);
-ms-transform: translate(2000px, 0);
transform: translate(2000px, 0);
-webkit-transition: -webkit-transform 1s ease;
transition: transform 1s ease;
}
.workdoor-bottom {
position: absolute;
bottom: 0;
left: 0;
z-index: 30;
width: 2000px;
height: 2000px;
background: url(../portfolio-door-bottom.svg) bottom left no-repeat;
-webkit-background-size: cover;
background-size: cover;
pointer-events: none;
-webkit-transition: -webkit-transform 1s ease;
transition: transform 1s ease;
-webkit-transform: translate(-15px, 0);
-ms-transform: translate(-15px, 0);
transform: translate(-15px, 0);
}
.workdoor-bottom.hidden {
-webkit-transform: translate(-2000px, 0);
-ms-transform: translate(-2000px, 0);
transform: translate(-2000px, 0);
-webkit-transition: -webkit-transform 0s ease;
transition: transform 0s ease;
}
【问题讨论】：
标签： ios css animation google-chrome-devtools