Question

我已经制作了钻取菜单，我在iOS上遇到了性能问题。我不相信这是我正在做的那么难的动画。钻取选项部分基于基础钻取菜单。但我自己写了。

Android /桌面
下面是它应该如何工作的动画，并适用于桌面和Android设备

的iOS
这个动画展示了它如何在iOS上运行，正如你所看到的，动画工作不流畅，50％只是打破它。

您可以在jsfiddle

上查看代码

如何在iOS上修复这些滞后动画？

修改如果我从CSS transition: transform 1s linear;中删除它，则动画消失，直接显示向下钻取菜单。在所有设备上正常工作。这是iOS中的性能问题吗？我从Foundation复制了部分代码，但似乎没有这个问题。我错过了哪一部分？

HTML

<ul class="drilldown is-main">
  <li>
    <a href="#" class="has-sub">Item 1</a>
    <ul class="drilldown-menu sub">
      <li class="drilldown-back"><a href="#terug">Back</a></li>
      <li><a href="#">sub 1</a></li>
      <li><a href="#">sub 2</a></li>
      <li><a href="#">sub 3</a></li>
      <li><a href="#">sub 4</a></li>
    </ul>
  </li>
  <li>
    <a href="#" class="has-sub">Item 2</a>
    <ul class="drilldown-menu sub">
      <li class="drilldown-back"><a href="#terug">Back</a></li>
      <li><a href="#">sub 1</a></li>
      <li><a href="#">sub 2</a></li>
      <li><a href="#">sub 3</a></li>
      <li><a href="#">sub 4</a></li>
    </ul>
  </li>
  <li>
    <a href="#" class="has-sub">Item 3</a>
    <ul class="drilldown-menu sub">
      <li class="drilldown-back"><a href="#terug">Back</a></li>
      <li><a href="#">sub 1</a></li>
      <li><a href="#">sub 2</a></li>
      <li><a href="#">sub 3</a></li>
      <li><a href="#">sub 4</a></li>
    </ul>
  </li>

  <li>
    <a href="#" class="has-sub">Item 4</a>
    <ul class="drilldown-menu sub">
      <li class="drilldown-back"><a href="#terug">Back</a></li>
      <li><a href="#">sub 1</a></li>
      <li><a href="#">sub 2</a></li>
      <li><a href="#">sub 3</a></li>
      <li><a href="#">sub 4</a></li>
    </ul>
  </li>

  <li>
    <a href="#" class="has-sub">Item 5</a>
    <ul class="drilldown-menu sub">
      <li class="drilldown-back"><a href="#terug">Back</a></li>
      <li><a href="#">sub 1</a></li>
      <li><a href="#">sub 2</a></li>
      <li><a href="#">sub 3</a></li>
      <li><a href="#">sub 4</a></li>
    </ul>
  </li>
  <li><a href="/">No sub 1</a></li>
  <li><a href="/">No sub 2</a></li>
  <li class="divider"></li>
  <li><a href="/">No sub 3</a></li>
  <li><a href="/">No sub 4</a></li>
</ul>

CSS

ul.drilldown {
  background-color: gray;
  list-style: none;
  padding-left: 0px;
}

ul.drilldown li {
  padding-left: 15px;
  padding-right: 15px;
}

ul.drilldown li:hover {
  background-color: darkgray;
}

ul.drilldown li a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 10px 0px;
}

ul.drilldown li a.has-sub::after {
  font-family: "FontAwesome";
  content: "\f054";
  float: right;
}

ul.drilldown li.drilldown-back {
  background-color: lightgray;
}

ul.drilldown li.drilldown-back:hover {
  background-color: darkgray;
}

ul.drilldown li.drilldown-back > a::after {
  font-family: "FontAwesome";
  content: "\f053";
  float: right;
}

ul.drilldown li.divider {
  height: 1px;
  margin: 15px 0;
  overflow: hidden;
  background-color: darkgray;
}

ul .drilldown-menu {
  background-color: gray;
  position: absolute;
  top: 40px;
  left: 100%;
  width: 100%;
  transition: transform 1s linear;
  list-style: none;
  padding-left: 0px;
}

ul .drilldown-menu.sub {
  top: 0px;
  height: 100%;
}

ul .drilldown-menu.is-main {
  left: 0;
  display: block;
  height: 1000px;
}

ul .drilldown-menu.is-active {
  transform: translateX(-100%);
}

ul .drilldown-menu li {
  padding-left: 15px;
  padding-right: 15px;
}

ul .drilldown-menu li:hover {
  background-color: darkgray;
}

ul .drilldown-menu li a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 10px 0px;
}

ul .drilldown-menu li a.has-sub::after {
  font-family: "FontAwesome";
  content: "\f054";
  float: right;
}

ul .drilldown-menu li.drilldown-back {
  background-color: lightgray;
}

ul .drilldown-menu li.drilldown-back:hover {
  background-color: darkgray;
}

ul .drilldown-menu li.drilldown-back > a::after {
  font-family: "FontAwesome";
  content: "\f053";
  float: right;
}

ul .drilldown-menu li.divider {
  height: 1px;
  margin: 15px 0;
  overflow: hidden;
  background-color: darkgray;
}

JS

$(function() {
  $('.drilldown a').click(function(e) {
    var $this = $(this);
    var href = $(this).attr('href');


    if (href == '#') {
      // Menu heeft een submenu
      e.preventDefault();

      $this.next('.drilldown-menu').addClass('is-active');

    } else if (href == '#terug') {
      // Huidige menu sluiten
      e.preventDefault();
      $this.closest('.drilldown-menu').removeClass('is-active');

    }
  });
});

过渡时的CSS3问题

0 个答案: