CSS3動畫

Question

中/ JS獲取元素的位置，我需要得到元素的位置一樣（用jQuery）

$(".mydiv").position().left; 

不過，我需要在css3 translate animation做到這一點。這個動畫轉換的div位置包含在position()數據中。

是否可以在動畫中獲取元素的位置，但沒有任何翻譯的位置（就像沒有動畫一樣）？

Answer 1

編輯

「我不使用.animate簡單的動畫，因爲CSS3 - Kluska000」

應該還是能夠利用jQuery的animate()start，step，progress回調函數 - 即使在css完成實際的動畫。例如，可以在目標元素處利用.animate() - 實際上不用動畫元素 - 僅利用start,step,progress回調函數;與duration同步到css動畫持續時間。此外，似乎jquery .animate()實際上並不要求目標是一個DOM元素;可能是2 js objects。

又見window.requestAnimationFrame()

https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

嘗試（見console在的jsfiddle，下面鏈接）

$(function() { 
    $(".mydiv").animate({ 
     left :"0px" 
     }, { 
     duration : 1234, 
     start : function (promise) { 
       console.log($(".mydiv").position().left); 
     }, 
     step : function (now, tween) { 
       console.log($(".mydiv").position().left); 
     }, 
     progress : function (promise) { 
       console.log($(".mydiv").position().left); 
     }, 
     complete : function() { 
       $(this).animate({left:"0px"}, 1234) 
     } 
    }); 
    }); 

的jsfiddle http://jsfiddle.net/guest271314/xwL7v/

見在start，step，progress

Answer 2

好，不管你如何創建動畫的，我認爲最好的方法是創建一個動畫類，並儘快將其固定爲DOM加載，但只記錄後位置供以後使用。

基本上，如果你設置動畫的時候了它會給你同樣的效果，但你必須爲以後使用的所有細節記錄：

現場演示：Fiddle

PS：我做了鍍鉻的演示，只是改變/根據需要去除-webkit-爲其他瀏覽器：

-webkit-: chrome, safari 
-moz-: firefox 
-ms- : internet explorer 
-o-: opera 
without prefix: default 

HTML：

<div id="status_div">&nbsp;</div> 
<div id="slider"></div> 

CSS：

* { 
    margin:0; 
    padding:0; 
} 
#slider { 
    width:100px; 
    height:100px; 
    display:block; 
    background:red; 
} 
.SliderAnim { 
    -webkit-animation:some_animation 2000ms linear forwards; 
} 
#status_div { 
    position:relative; 
    left:0; 
    top:0; 
    width:100%; 
    height:auto; 
    border:2px solid navy; 
    color:black; 
} 
@-webkit-keyframes some_animation { 
    from { 
     -webkit-transform:translateX(-100px); 
    } 
    to { 
     -webkit-transform:translateX(100px); 
    } 
} 

JS：

$(function() { 
    // those are the position and offset before animation was attached 
    var pX = $("#slider").position().left; 
    var pY = $("#slider").position().top; 
    var oX = $("#slider").offset().left; 
    var oY = $("#slider").offset().top; 
    // those are declarations for vars which will store the position and offset 
    // of the element right after attaching the animation, and will result in the values 
    // of the first fram of the animation 
    var npX = 0; 
    var npY = 0; 
    var noX = 0; 
    var noY = 0; 
    // this is a timer function to write the details on the status bar 
    setInterval(function() { 
     // those are the position and offset of the element during the animation 
     var apX = $("#slider").position().left; 
     var apY = $("#slider").position().top; 
     var aoX = $("#slider").offset().left; 
     var aoY = $("#slider").offset().top; 
     //print status bar info 
     $("#status_div").html("BEFORE ATTACHING ANIMATION position: " + pX + "," + pY + " offset: " + oX + "," + oY + " <br/> AFTER ATTACHING ANIMATION position: " + npX + "," + npY + " offset: " + noX + "," + noY + "<br/> DURING ANIMATION position: " + apX + "," + apY + " offset: " + aoX + "," + aoY); 
    }, 100); 
    //attach the animation class to the slider div 
    $("#slider").addClass("SliderAnim"); 
    //record the changed (will result in the first animation frame) 
    npX = $("#slider").position().left; 
    npY = $("#slider").position().top; 
    noX = $("#slider").offset().left; 
    noY = $("#slider").offset().top; 
});