Ошибка анимации JQuery CSS на мобильном телефоне

Question

У меня есть анимация с использованием JQuery и CSS для разворачивания divs в поле зрения.

Это мой Javascript код:

(function($) { 
    $.fn.visible = function(partial) { 
     var $t   = $(this), 
      $w   = $(window), 
      viewTop  = $w.scrollTop(), 
      viewBottom = viewTop + $w.height(), 
      _top   = $t.offset().top, 
      _bottom  = _top + $t.height(), 
      compareTop = partial === true ? _bottom : _top, 
      compareBottom = partial === true ? _top : _bottom; 
    return ((compareBottom <= viewBottom) && (compareTop >= viewTop)); 
    }; 
})(jQuery); 


$(window).scroll(function(event) { 

    $(".slide-up").each(function(i, el) { 
    var el = $(el); 
    if (el.visible(true)) { 
     el.addClass("come-up"); 
    } 
    }); 

}); 

$(document).ready(function() { 
    $(".heading-slide-down").each(function(i, el) { 
    var el = $(el); 
    if (el.visible(true)) { 
     el.addClass("come-down"); 
    } 
    }); 

}); 

$(window).scroll(function(event) { 

    $(".slide-left").each(function(i, el) { 
    var el = $(el); 
    if (el.visible(true)) { 
     el.addClass("come-left"); 
    } 
    }); 

}); 

$(window).scroll(function(event) { 

    $(".slide-right").each(function(i, el) { 
    var el = $(el); 
    if (el.visible(true)) { 
     el.addClass("come-right"); 
    } 
    }); 

}); 

И это мой CSS

/** FADE IN SLIDING FROM BOTTOM TO TOP **/ 
.come-up { 
    transform: translateY(150px); 
    animation: comeup 0.8s ease forwards; 
} 
.come-up:nth-child(odd) { 
    animation-duration: 0.6s; 
} 
@keyframes comeup { 
    to { transform: translateY(0); } 
} 


/** FADE IN SLIDING FROM TOP TO BOTTOM **/ 
.come-down { 
    transform: translateY(-100px); 
    animation: comedown 0.8s ease forwards; 
} 
.come-down:nth-child(odd) { 
    animation-duration: 0.6s; 
} 
@keyframes comedown { 
    to { transform: translateY(0); } 
} 


/** FADE IN SLIDING FROM RIGHT TO LEFT **/ 
.come-left { 
    transform: translateX(100px); 
    animation: comeleft 0.8s ease forwards; 
} 
.come-left:nth-child(odd) { 
    animation-duration: 0.6s; 
} 
@keyframes comeleft { 
    to { transform: translateX(0); } 
} 


/** FADE IN SLIDING FROM LEFT TO RIGHT **/ 
.come-right { 
    transform: translateX(-100px); 
    animation: comeright 0.8s ease forwards; 
} 
.come-right:nth-child(odd) { 
    animation-duration: 0.6s; 
} 
@keyframes comeright { 
    to { transform: translateX(0); } 
} 

С моей дивой, что нужно раздвижной я просто применить классы slide-up или slide-left т.д.

Живых demo: http://www.shivampaw.com

На моем ноутбуке он работает отлично, однако на моем телефоне (iPhone) divs уже находятся в правильном положении, и когда я прокручиваю их, я вижу, как они трансформируются, а затем оживляют, где они должны быть.

Я не уверен, как еще я могу это объяснить, если это возможно, попытайтесь взглянуть на себя и просто прокрутите страницу вниз, и вы это увидите.

Как это происходит, и есть ли исправление?

Спасибо!

Update: Проблема заключается в том, что на мобильном сафари на iPhone SE последней прошивку дива, которые должны быть начиная расположены вниз, чтобы они могли скользить вверх на место только начинает в нужном месте, а затем двигается вниз и раздвижная резервное копирование когда они видны.

Answer 1

Я испытываю то же самое. Проблема заключается в том, что на мобильных устройствах .visible() становится истинным некоторое время ПОСЛЕ того, как элемент ввел экран (а не ТОЧНО, когда он входит на экран), делая элемент видимым для вас уже до того, как будет воспроизведена анимация , Я быстро исправил это, придав элементам непрозрачность 0 и изменив это только при воспроизведении анимации.

Вы должны добавить это в ваш CSS:

.slide-up, .heading-slide-down, .slide-left, .slide-right { 
opacity:0; 
} 

.come-up, .come-down, .come-left, .come-right { 
opacity:1; 
-webkit-transition: opacity 0.8s ease-in; 
-moz-transition: opacity 0.8s ease-in; 
-o-transition: opacity 0.8s ease-in; 
-ms-transition: opacity 0.8s ease-in; 
transition: opacity 0.8s ease-in; 
} 

.come-up:nth-child(odd), .come-down:nth-child(odd), .come-left:nth-child(odd), .come-right:nth-child(odd) { 
opacity:1; 
-webkit-transition: opacity 0.6s ease-in; 
-moz-transition: opacity 0.6s ease-in; 
-o-transition: opacity 0.6s ease-in; 
-ms-transition: opacity 0.6s ease-in; 
transition: opacity 0.6s ease-in; 
} 

Чтобы убедиться, что эти анимации не воспроизводятся на предметы, которые уже в силу при загрузке страницы, вы можете добавить это к вашему JQuery:

$(".slide-up, .slide-left, .slide-right").each(function() { 
        if ($(this).visible(true)) { 
         $(this).addClass("already-visible"); 
         } 
        }); 

А в нижней части CSS:

.already-visible { 
opacity:1; 
transform: translateY(0); 
transform: translateX(0); 
animation: none; 
-webkit-transition: none; 
-moz-transition: none; 
-o-transition: none; 
-ms-transition: none; 
transition: none; 
}