我已经制作了钻取菜单,我在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');
}
});
});