Question

我正在开发一个单页面的Javascript应用程序，它可以在桌面浏览器上运行，也可以通过Cordova / Phonegap在移动设备上运行。

我有一个使用CSS过渡实现的滑出式菜单。我注意到它在桌面浏览器和android上运行良好。但是，在IOS上存在严重的性能问题。转换似乎没有准时开始，但一旦开始渲染，持续时间看起来很好。在IOS上开始转换和transitionend事件之间的时间比其他平台高。例如，转换的持续时间是300毫秒，但我没有得到1500ms的transitionend事件。在所有其他平台上，我在325-350ms内获得transitionend事件。

Transitionend事件：

预计：350毫秒
实际：1500毫秒

平台：

Cordova 6.3.1
Xcode 8.1 GM Seed
IOS 10.1

这是菜单div的CSS。要滑出菜单，我添加'open'类。要关闭菜单，我会删除“打开”课程。我试过转换'left'属性和'transform'属性，但结果是一样的。

/* Nav Menu */

#navmenu {
    position: absolute;
    top: 0;
    width: 90%;
    max-width: 400px;
    z-index: 20;
    height: auto;
    background-color: white;
    /*
    -webkit-transform: translate3d(-100%,0,0);
       -moz-transform: translate3d(-100%,0,0);
        -ms-transform: translate3d(-100%,0,0);
            transform: translate3d(-100%,0,0);
    -webkit-transition: -webkit-transform 300ms ease;
       -moz-transition:    -moz-transform 300ms ease;
        -ms-transition:     -ms-transform 300ms ease;
         -o-transition:      -o-transform 300ms ease;
            transition:         transform 300ms ease;
    */
    left: -100%;
    -webkit-transition: left 300ms ease;
       -moz-transition: left 300ms ease;
        -ms-transition: left 300ms ease;
         -o-transition: left 300ms ease;
            transition: left 300ms ease;
}

#navmenu.open {
    /*
    -webkit-transform: translate3d(0,0,0);
       -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
    -webkit-transition: -webkit-transform 300ms ease;
       -moz-transition:    -moz-transform 300ms ease;
        -ms-transition:     -ms-transform 300ms ease;
         -o-transition:      -o-transform 300ms ease;
            transition:         transform 300ms ease;
    */
    left: 0;
    -webkit-transition: left 300ms ease;
       -moz-transition: left 300ms ease;
        -ms-transition: left 300ms ease;
         -o-transition: left 300ms ease;
            transition: left 300ms ease;
}

问题：只有在IOS平台上，可能导致延迟启动转换的原因是什么？是否有任何已知的解决方案来规避问题或加快速度？我在应用程序中有其他转换，需要5秒才能启动，使应用程序无法使用。我希望菜单解决方案将适用于整个应用程序。感谢您提供的任何帮助或想法。

这是我用来打开/关闭菜单的检测Javascript代码......

utilities.addEventListeners(navMenuButtonDiv, function () {
    var start = Date.now();
    var menuDiv = navMenu.getDiv();
    if (menuDiv.classList.contains('open')) {
        menuDiv.classList.remove('open');
    } else {
        menuDiv.classList.add('open');
    }
    var handler = function (event) {
        console.log('Transition: ' + (Date.now() - start));
        menuDiv.removeEventListener('webkitTransitionEnd', handler, true);
    };
    menuDiv.addEventListener('webkitTransitionEnd', handler, true);
 };

Answer 1

在屏幕上移动元素时，您希望最大限度地提高性能。您没有转换left属性，而是更好地使用翻译。使用翻译，设备将使用其GPU在DOM上方的图层上呈现屏幕上的更改。这将导致更平滑，更高效的过渡。

看看这个例子。除了使用transform而不是更改left属性外，请注意我删除了一些冗余。您不需要重新声明活动状态的转换。

＆＃13;

var open = document.getElementById("open"),
    close = document.getElementById("close"),
    nav = document.getElementById("navmenu");

open.addEventListener("click", function() {
  nav.classList.add("open");
}); 

close.addEventListener("click", function() {
  nav.classList.remove("open");
});

＆＃13;

#navmenu {
  position: absolute;
  top: 0;
  left: 0;
  width: 90%;
  max-width: 400px;
  z-index: 20;
  height: auto;
  background-color: white;
  transform: translate3d(-100%, 0, 0);
  -webkit-transition: transform 300ms ease-in-out;
     -moz-transition: transform 300ms ease-in-out;
      -ms-transition: transform 300ms ease-in-out;
       -o-transition: transform 300ms ease-in-out;
          transition: transform 300ms ease-in-out;
}

#navmenu.open {
  transform: translate3d(0, 0, 0);
}

button {
  margin-top: 100px;
}

＆＃13;

<div id="navmenu">stuff in here</div>
<button id="open">Open Menu</button>
<button id="close">Close Menu</button>

＆＃13;

IOS上的CSS过渡事件非常缓慢

1 个答案: