Анимация невероятно медленная на мобильном телефоне

Question

Я только что создал свое первое веб-приложение для компании, в которой я сейчас работаю, объясняя никому не объявления в компании, что «команда разработчиков», как нам известно (несмотря на наличие разработчиков) делать.

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

Я учусь кода в течение 4 месяцев, и взял на себя, чтобы разработать и создать все это самостоятельно, это было трудно, но, наконец, сегодня есть что-то достаточно работоспособным, чтобы загрузить на наш сервера.

Однако я испытываю несколько ошибок при работе с ошибками, которые мне не удалось диагностировать. Я чувствую, что это из-за моего отсутствия знаний о структурировании лучшей практики в JS, но анимации, которые не являются css (я использовал GSAP) для открытия и закрытия страниц «info», на мобильных устройствах невероятно медленны.

Это логика я использую для отображения информации для каждой итерации карты:

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(); 
    } 
}; 

Я понимаю, что я должен, вероятно, кэш $ (это) в переменной и ссылки, что в условном но, конечно, это не может быть причиной проблемы?

Любые идеи были бы высоко оценены, пожалуйста, не стесняйтесь просматривать фактический файл сценария и критиковать любую его часть - нужно научиться через критику!

Заранее благодарен!

Answer 1

Объединяя идеи 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 является «установить малое значение г, которое, как правило, заставит браузер, чтобы подтолкнуть элемент к GPU, таким образом, применяя матрицу, может быть сделано на GPU вместо CPU , Однако это не волшебная пуля, потому что есть затраты, связанные с продвижением на GPU (не связанные с GSAP), и у него только определенный объем памяти, поэтому не пытайтесь делать это с 1000 элементами одновременно .»Например:

//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}); 

Answer 2

Я думаю, что это фон/поворот (tranform). Если вы можете изменить это на классы 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; 
}