Safari上的复杂动画导致性能低下

线性的

因此,在网上漫游后,我决定在这里询问。

我正在为我们的公司构建一个Ionic应用程序,其中一项要求是应用此动画:

位置+过渡-动画

这是CSS部分:

.background{
    background-color:#292930;
}
ul{
    list-style:none;
}
.categories{
    text-align: center;
    position: relative;
    height:280px;
    width:90%;
}
.categories ul li div{
    font-size:18pt;
    border-radius:200px;
    margin-top:15px;
    background-color:#EAEAEA;
    height:30px;
    width:30px;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-transition:1s;
    transition:1s;
    position: absolute;
    display:block;
}
.moveTop {
   top:5px !important;
    left:77% !important;
}
.categories ul li:nth-child(1) div{left:3%; top:0;}
.categories ul li:nth-child(2) div{left:40%; top:0;}
.categories ul li:nth-child(3) div{left:77%; top:0;}
.categories ul li:nth-child(4) div{left:3%; top:31%;}
.categories ul li:nth-child(5) div{left:40%; top:31%;}
.categories ul li:nth-child(6) div{left:77%; top:31%;}
.categories ul li:nth-child(7) div{left:3%; top:63%;}
.categories ul li:nth-child(8) div{left:40%; top:63%;}
.categories ul li:nth-child(9) div{left:77%; top:63%;}

基本上可以用,但是在iOS或Safari浏览器上却表现迟钝,您甚至可以打开小提琴并作证。

深入研究后,我发现您可以添加

-webkit-transform: translate3d(0, 0, 0);

这应该强制GPU硬件加速,但这没有帮助。

后来我读过保罗爱尔兰的文章推荐使用transform:translate替代topleft属性。

所以我尝试了一下,它确实工作得非常顺利,问题是,在转换时,我需要指定每个元素,与自身相比应该移动多少(例如,向左移动30px),这在没有帮助时我必须支持多种屏幕尺寸。

有什么建议如何使用translate3d或translate来执行此操作,或者只是为了使其在Safari上流畅而行?

问题在于变换宽度与元素大小有关,并且没有响应。

一种可行的解决方案是使用li元素(通常在您的布局中未使用)来处理此问题。

我们可以给它们提供33%的容器大小(水平和垂直)。现在,所需的转换或多或少(您可以对此进行微调)为容器大小的1/3的100%和2/3的200%

悬停演示以查看转换

.background{
    background-color:#292930;
}
ul{
    list-style:none;
    height: 100%;
    position: relative;
}
.categories{
    text-align: center;
    position: relative;
    height:280px;
    width:90%;
}

li {
    width: 33%;
    height: 33%;
    top: 5px;
    left: 66%;
    position: absolute;
    transition:1s;
}

.categories ul li div{
    left: 5%;
    font-size:18pt;
    border-radius:200px;
    margin-top:15px;
    background-color:#EAEAEA;
    height:30px;
    width:30px;
    -webkit-transform: translate3d(0, 0, 0);
    position: absolute;
    display:block;
}

.categories ul li:nth-child(1) {transform: translate(-200%); z-index: 10;}
.categories ul li:nth-child(2) {transform: translate(-100%);}
.categories ul li:nth-child(3) {transform: translate(0%);}
.categories ul li:nth-child(4) {transform: translate(-200%, 100%);}
.categories ul li:nth-child(5) {transform: translate(-100%, 100%);}
.categories ul li:nth-child(6) {transform: translate(   0%, 100%);}
.categories ul li:nth-child(7) {transform: translate(-200%, 200%);}
.categories ul li:nth-child(8) {transform: translate(-100%, 200%);}
.categories ul li:nth-child(9) {transform: translate(   0%, 200%);}

.categories:hover ul li {transform: translate(0%, 0%) !important;}
<div class="background categories">
    <ul>
        <li><div class="elem">1</div></li>
        <li><div class="elem">2</div></li>
        <li><div class="elem">3</div></li>
        <li><div class="elem">4</div></li>
        <li><div class="elem">5</div></li>
        <li><div class="elem">6</div></li>
        <li><div class="elem">7</div></li>
        <li><div class="elem">8</div></li>
        <li><div class="elem">9</div></li>
    </ul>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TOP 榜单

  1. 1

    来自Microsoft Office加载项taskpane.js的MySQL驱动程序模块的空引用

  2. 2

    使用AWS Cognito和React的仅限Facebook / Google的登录名(无用户名/密码)

  3. 3

    创建Windows Phone 8应用并将其连接到数据库的最佳方法(最好是SQL Server)

  4. 4

    为什么Java中的System.out.println()打印到控制台?

  5. 5

    卷曲函数无法解析来自bash中变量的代理

  6. 6

    是什么在Android的consumer-rules.pro和proguard-rules.pro之间的区别?

  7. 7

    设置与Apache POI Excel表散点图标记图标的颜色

  8. 8

    将Qt Pyside2与asyncio await语法一起使用?

  9. 9

    崇高的文字+蟒蛇的蟒蛇

  10. 10

    任务':app:minifyReleaseWithR8'.java.lang.NullPointerException的执行失败(无错误消息)

  11. 11

    OpenJDK的和AdoptOpenJDK的区别

  12. 12

    大型数据集缓存到Spark内存中时,“超出了GC开销限制”(通过sparklyr和RStudio)

  13. 13

    “执行测试CMAKE_HAVE_LIBC_PTHREAD”失败实际上是什么意思?

  14. 14

    使用Core 2.2中的Identity,如何在关闭浏览器15分钟后保持会话活动?

  15. 15

    React中的ForwardRefExoticComponent和ForwardRefRenderFunction有什么区别?

  16. 16

    猫鼬查找结果,然后将字段替换为findOne

  17. 17

    如何降级Google Colab的Torch版本

  18. 18

    Keras提前停止回调错误,val_loss指标不可用

  19. 19

    如何避免VSCode中的“导入路径不能以.ts扩展名结尾”错误?

  20. 20

    Nuxt.JS:如何在页面中获取路由URL参数

  21. 21

    是否有为什么会AccessibilityManager.sInstance导致内存泄漏的一个原因?

热门标签

归档