移动设备上的 Jquery CSS 动画错误

Question

我有一个使用 JQuery 和 CSS 将 div 滑入视图的动画。

这是我的 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); }
}

对于需要滑动的 div，我只需应用 slide-up 或 slide-left 等类。

现场演示：http://www.shivampaw.com

在我的笔记本电脑上它工作正常，但在我的手机 (iPhone) 上，div 已经处于正确的位置，当我向它们滚动时，我看到它们变形了，然后动画到它们应该在的位置。

我不确定我还能如何解释这一点，如果可能的话，试着自己看看，然后慢慢向下滚动网站，你就会看到它。

这是怎么发生的？有解决办法吗？

谢谢！

更新： 问题是，在 iPhone SE 最新 iOS 上的移动 safari 上，应该开始向下放置以便它们可以向上滑动到位的 div 是从正确的位置开始，然后在它们在视图中时向下移动并滑动备份。

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