CSSアニメーション中に要素オフセットを更新する

Question

CSSアニメーション中に要素の現在のオフセットを取得しようとしています。 私はこのようなアニメーショントラフのjQueryを発射しています：

$('.left').css('margin-left', '50%'); 

もちろん要素は、CSSのすべてのトランジションを得たので、.cssのアニメーションに変わります。 はその後、私はそのようなオフセット電流を得るためにしようとしている：

var left = $(".left"); 
var Loffset = left.offset(); 
console.log(Loffset.left); 

問題はオフセットがautamaticallyアニメーション中に更新されないということです。そして、私は特定の位置に要素をキャッチしたい。

Thnxです。

Answer 1

jquery animate()のstepプロパティを使用して、要素の現在のオフセットを取得できます。

$("div").animate({ 
 
    "margin-left": "50%" 
 
},{ 
 
    duration: 3000, 
 
    step: function(){ 
 
     console.log($(this).offset().left); 
 
    } 
 
});

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div></div>

Answer 2

私はこれを行うには、方法を見つけました。これは、オフセットごとに0ミリ秒（ノンストップ）をチェックしています

var myFunction = function() { 
     var left = $('.left'); 
     var Loffset = left.offset(); 
     console.log(Loffset.left); 
     if (windowWidthQuarter == Loffset.left) { 
      /* here goes code */   
     } 
}; 
var timer = setInterval(myFunction, 0); 

：すべての まず、私は継続的に発射機能を作りました。 次に、遷移が終了したら、シャットダウンします。

$(".left").on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ 
    clearTimeout(timer); 
});