Question

所以我使用Prinzhorn skrollr创建了一个网站，其中包含滚动或滑动页面的文本和图像。一切正常，但我认为我发现了一个性能错误。 skrollr的工作方式是使用数字作为名称的数据属性，数字是动画应该发生的点。数据属性的值是css规则。

我必须在隐藏或可见的几个代码块上使用display:none，具体取决于屏幕大小。这是b / c数据属性中的数字有时对于移动屏幕来说太大而且动画发生在错误的时间。

无论如何，问题是即使块被设置为display:none，隐藏的代码块中的css也在计算。

在下面的代码中，您可以看到在桌面宽度时Chrome浏览器工具中重新计算移动导航栏的不透明度。

<nav>
<!-- === Desktop and tablet === -->
<div class="hide-for-small">
  <a id="menu-btn" href="#">
    <img src="/assets/img/menu-btn.png" alt="Menu" data-600="opacity:1" data-620="opacity:0" />
    <img src="/assets/img/menu-btn-alt.png" alt="Menu" data-600="opacity:0" data-620="opacity:1 />
  </a>
</div>
<!-- === End Desktop and tablet === -->

<!-- === Mobile === -->
<div class="show-for-small">
  <a id="menu-btn" href="#">
    <img src="/assets/img/menu-btn.png" alt="Menu" data-560="opacity:1" data-580="opacity:0" />
    <img src="/assets/img/menu-btn-alt.png" alt="Menu" data-560="opacity:0" data-580="opacity:1" />
  </a>
</div>
<!-- === End Mobile === -->

有关如何防止这种情况的任何想法？就像我说的那样，一切看起来都很好但是我注意到移动设备上有一些小的延迟，而且我打赌它的b / c设备必须进行两次相同的计算。

隐藏的元素仍然是动画，而显示无应用

0 个答案: