1

我正在做一个页面设计，左侧有 1 个大 div，右侧有 6 个小 div 并排。当我单击右侧的一个 div 时，该 div 中的内容会向左过渡，而前一个大的会出现在右侧。为此，我用 JQuery 编写了一个动画，将我的左侧 div 移动到我单击的元素的位置，隐藏它，然后将其展开回原来的位置。我遇到的问题是它在 Chrome 上运行得很好，但是当我在 Firefox 上试用它时，动画就滞后了。如何提高跨不同浏览器的动画性能？

$(document).ready(function() {
  $(".small").click(function() {
    var offset = $(this).offset();
    var pusher = offset.top - 54;
    $("div.left-side").css({'height': '129', 'left': '40%', 'top':  offset, 'opacity': '0'});
    $("div.left-side").animate({'left': '0%','top': '0', 'height': '800', 'opacity': '1'}, 500);
    $('html, body').animate({scrollTop: $(".container").offset().top}, 500);
  });
});

这将是我正在处理的那一刻的完整代码： https ://github.com/renepickhardt/metalcon/tree/feature/frontend/basic_page_template 问题的相关部分将在 main.html, contentswap2.js和 style.css。我试图将问题归结为本质，但我想这还不够清楚。

4

1 回答 1

1

这似乎是一个非常沉重的动画，取决于您的 HTML 的其余部分......

无论如何，您可以尝试添加transform: translate3d(0, 0, 0)到您的 .css() 部分，所以：

$("div.left-side").css({'transform': 'translate3d(0, 0, 0)', 'height': '129', 'left': '40%', 'top':  offset, 'opacity': '0'});

但是不要忘记浏览器前缀：-webkit, -moz, ...如果您希望使用旧浏览器。

这个技巧实际上通过将东西发送到渲染速度更快的 GPU 来强制硬件加速，尽管在所有/旧浏览器中都不起作用......

于 2013-09-14T14:25:46.100 回答