Question

我刚刚为我目前工作的公司创建了我的第一个网络应用程序，向公司的所有创意人员解释了这个＆＃34;设计团队＆＃34;正如我们所知（尽管有开发人员）。

http://staging.catalysis.co.uk/designteam/

我已经学习了大约4个月的代码并且自己设计并创造了这一切，这很难，但是今天终于可以上传到我们的服务器。

然而，我遇到了一些我无法诊断的错误行为。我有一种感觉，因为我缺乏JS中最佳实践结构的知识，但是非css（我使用GSAP）的动画用于打开和关闭＆＃34; info＆＃34;移动设备上的页面显得非常慢。

这是我用来显示每次卡片迭代信息的逻辑：

var info = $('.info');

info.click(function(){
    var gp = $(this).parent().parent(),
        gpInfoBG2 = gp.parent().siblings(".info-bg-close"),
        gpInfoBG = gp.parent().siblings(".info-bg");

    if ($(this).is('.first')) {
        gp.css({"display": "none"});
        backgroundIn(gp.siblings(".infotext-one"), gpInfoBG, gpInfoBG2);
        gp.siblings(".infotext-one").addClass('open');

    } else if ($(this).is('.second')) {
        gp.css({"display": "none"});
        backgroundIn(gp.siblings(".infotext-two"), gpInfoBG, gpInfoBG2);
        gp.siblings(".infotext-two").addClass('open');

    } else if ($(this).is('.third')) {
        gp.css({"display": "none"});
        backgroundIn(gp.siblings(".infotext-three"), gpInfoBG, gpInfoBG2);
        gp.siblings(".infotext-three").addClass('open');

    } else if ($(this).is('.fourth')) {
        gp.css({"display": "none"});
        backgroundIn(gp.siblings(".infotext-four"), gpInfoBG, gpInfoBG2);
        gp.siblings(".infotext-four").addClass('open');
    }
});

function backgroundIn(elemObject, infoBG, infoBG2) {

    var tl = new TimelineMax({onComplete:showText}),
        button = infoBG.siblings('.button-container'),
        line1 = button.children('.line-one'),
        line2 = button.children('.line-two');

        tl.fromTo(infoBG2, .3, {height: "0"}, {height: "100%"})
          .fromTo(infoBG, .3, {height: "0"}, {height: "100%"}, 0.25)
          .to(infoBG, .4, {height: "84%"})
          .to(infoBG, .3, {height: "86%"})
          .to(infoBG, .2, {height: "85%"})
          .fromTo([line1, line2], 0.2, {width: "0px"}, {width: "30px"}, 1)
          .to(line1, .2, {css:{rotation: 45, transformOrigin: "50% 50%"}}, 1.4)
          .to(line2, .2, {css:{rotation: -45, transformOrigin: "50% 50%"}}, 1.4);

    function showText() {
        elemObject.fadeIn();
    }
};

我意识到我应该将$（this）缓存在条件语句中的变量和引用中，但肯定不能成为问题的根源吗？

任何想法都将不胜感激，请随时查看实际的脚本文件并批评它的任何部分 - 必须通过批评来学习！

提前致谢！

Answer 1

我认为这是背景/轮换（转型）。如果您可以将其更改为css类，则可能会提高速度。根据我的经验，css动画对手比javascript动画更顺畅。除此之外，一些小的调整可能会有所帮助：

// you could change this:
gp.css({"display": "none"});
// to:
gp[0].style.display = 'none';

如果你给你的元素一个data-position值，你可以删除elseif并用开关替换它（这会跳过.is()检查：

switch( $(this).data('position'){
    case 'first': 
        // stuff
    break;
    case 'second': 
        // stuff
    break;
}

Answer 2

结合Martijn和TrueBlueAussie的想法，您可以通过在目标元素上使用数据属性来重构代码：

info.click(function(){
    var gp = $(this).parent().parent(),
        gpInfoBG2 = gp.parent().siblings(".info-bg-close"),
        gpInfoBG = gp.parent().siblings(".info-bg"), 
        position = $(this).data('position'),
        infotext;

    switch (position) {
        case 'first': 
           infotext = '.infotext-one';
           break;
        case 'second': 
           infotext = '.infotext-two';
           break;
        case 'third': 
           infotext = '.infotext-three';
           break;
    }

    gp[0].style.display = 'none';
    backgroundIn(gp.siblings(infotext), gpInfoBG, gpInfoBG2);
    gp.siblings(infotext).addClass('open');
});

修改

从这篇文章Greensock slow on mobile devices中得到的建议修复是设置一个小的z值，通常会强制浏览器将元素推送到GPU，因此应用矩阵在GPU上完成的CPU。然而，这并不是一个神奇的子弹，因为将内容推送到GPU（与GSAP无关）需要花费成本，而且它只有一定的内存，因此不要尝试使用1000个元素一下子。＆＃34;例如：

//if this is your original tween... tl.to(line1, .2, {rotation:45}); //to force it onto the gpu, you can simply add z:0.1: tl.to(line1, .2, {rotation:45, z:0.1});

移动设备上的动画非常慢

2 个答案: