手机上的jQuery CSS动画错误

Question

I have an animation using JQuery and CSS for sliding divs into view.

This is my javascript code:

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

});

And this is my 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); }
}

With my divs that need sliding I just apply the classes slide-up or slide-left etc.

Live demo: http://www.shivampaw.com

On my laptop it works fine, however on my phone (iPhone) the divs are already in the correct position and as I scroll towards them I see them transform away and then animate to where they should be.

I'm not sure how else I can explain this, if possible try and take a look for yourself and just scroll down the site slowly and you will see it.

How come this is happening and is there a fix?

Thanks!

Update: The problem is that on mobile safari on an iPhone SE latest iOS the divs that should be starting positioned downwards so they can slide up into place are starting in the right place and then moving down and sliding backup when they are in view.

Answer 1

I'm experiencing the exact same issue. The problem seems to be that on mobile devices, .visible() only becomes true some time AFTER the element has entered the screen (rather than EXACTLY when it enters the screen), making the element visible to you already before the animation is played. I quick-fixed this by giving the elements an opacity of 0 and changing this only when the animation plays.

You would have to add this to your 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;
}

To make sure these animations aren't played on items that are already in view when the page loads, you could add this to your jQuery:

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

And at the bottom of your 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;
}