javascript - .append() 将图像 append 到过渡非常慢

Question

我遇到了图片在移动设备上加载速度不够快的问题。我的元素有一个图像和一个按钮。单击该按钮时，图像向下滑动，另一幅图像从顶部滑动以取代它。这是代码

html

 <div class="main">

    <div id="myDiv1><img src="img1.jpg" width="100%"></div>
    <div id="myDiv2"></div>

</div>

CSS

.moveFromTop {
    animation: moveFromTop 2s ease both;
}

.moveToBottom {
    animation: moveToBottom 2s ease both;
}

@keyframes moveFromTop {
    from { transform: translateY(-100%); }
}

@keyframes moveToBottom {
    from { }
    to { transform: translateY(100%); }
}

js

var img2 = new Image(); 

img2.src = "img2.jpg";

$(img2).css("width","100%");

$(document).ready( function () {


    $('#button').click(function(){

        $('#myDiv1').addClass('moveToBottom');

        $("#myDiv2").append(img2);

        $('#myDiv2').addClass('moveFromTop');
   });
});

它相当简单，可以在桌面上运行。但是在移动设备上，当您单击#button 时，第二张图片不会立即加载，因此您会得到一秒钟的黑色图片，这完全破坏了我想要的效果。这在 iPhone 和 iPad 上都会发生。我还没有机会在 Android 上进行测试，但你可能会认为售价 700 美元以上的苹果手机可以处理一点过渡；)我想知道我的代码是否有什么地方做错了导致这个问题.这是我的第一个元素。感谢您的宝贵时间。

-------------------------------------------- - - - - - - - - - - 编辑 - - - - - - - - - - - - - - - --------------------------------

自发布此问题以来，我已经尝试了很多事情。我试过将“append ”行移到“点击”功能之外，图像立即加载，指出这个问题与 append() 方法没有任何关系。我还尝试了一种不同的方法，即立即加载图像并显示“无”，然后执行 .css("display","block") 而不是 append 。我们仍然得到了破坏我在移动设备上想要的效果的黑色图像。如果您想自己查看问题，请访问“alicesoyer.com”。该站点已上线但正在 build 中。您需要单击屏幕上的任意位置来启动动画。你会看到我想要的效果。在桌面上它工作正常。在手机上它没有。我正在 iPad air 和 iPhone6 上进行测试。谢谢。

Answer 1

解决方法是添加

    * {
        -webkit-transform: translate3d(0,0,0);
    }

或至少对某些子元素触发浏览器更好地使用硬件加速。更多信息，请访问 this页

---更新:这样说(即仅在动画上)应该就足够了，很可能会解决新的 iPad 问题:

.moveFromTop {
    animation: moveFromTop 2s ease both;
    -webkit-transform: translate3d(0,0,0);
}

.moveToBottom {
    animation: moveToBottom 2s ease both;
    -webkit-transform: translate3d(0,0,0);
}