モバイルでのJqueryのCSSアニメーションのバグ

Question

私はアニメーションをJQueryとCSSを使ってビューに分割しています。

これは私の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"); 
    } 
    }); 

}); 

そして、これは私がちょうどなどslide-upまたはslide-left

ライブクラスを適用するスライディングする必要が私のCSS

私のdivで

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

ですデモ：http://www.shivampaw.com

私のラップトップではうまくいきますが、私の電話（iPhone）ではdivはすでに正しい位置にあります。私はそれらの方にスクロールすると、離れた場所に移動してから、どこにあるべきかを確認します。

可能であれば、私はこれをどのように説明することができないのか分かりませんが、自分自身を見てゆっくりとサイトをゆっくりとスクロールしてみてください。

どうしてこれが起こっているのですか？修正がありますか？

ありがとうございます！

更新： 問題はiPhone SE、最新のiOSのモバイルサファリで彼らが所定の位置にまでスライドさせることができるように、下向きに配置始動しなければならないのdivが正しい場所に開始し、その後下降し、バックアップをスライドされていることです彼らは視野に入っています。

Answer 1

まったく同じ問題が発生しています。 この問題は、モバイルデバイスでは、要素が画面に入ったときに（画面に入ると正確にではなく）一部の時間が経過するとtrueになり、要素が再生される前に表示されるようになります。 要素に不透明度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; 
}