Question

我需要在CSS过渡的中间接收元素left和top属性。目前我使用jQuery位置方法，它似乎在某种程度上起作用。

我做了两个例子来更清楚地表明我的问题：

1）这是 NON - 工作示例，其中元素的位置打印到控制台。接收到正确的位置，直到元素转换变为其原始位置。在变换值第一次更改后，位置不再更新。 jsFiddle链接：http://jsfiddle.net/PCWDa/8/

2）这里是 WORKING 示例，仅向我们报告元素位置的方式不同：位置输入（type = text）元素值。 jsFiddle链接：http://jsfiddle.net/PCWDa/9/

结论：当dom元素属性没有收到任何更新时（例如更新文本元素的值等），jQuerys position（）方法似乎没有收到正确的位置。

Bug？这可能是jQuery，css或浏览器本身的错误？是否有任何变通方法可以让第一个示例正常工作 - 在转换过程中随时获得正确位置，而无需像第二个示例那样更改dom元素属性。

jsFiddle代码：

要获取示例1代码，请将变量设置为false并将示例2更改为true。

CSS

.box{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-transition: all 5000ms ease;
}
.box_moved{
    -webkit-transform: translateX(300px);
}

HTML

<div class="box"></div>
<input type="text" class="val">

的javascript

var direction = false;
var working = false; 

window.forward = function(){$('.box').addClass('box_moved')}
window.backward = function(){$('.box').removeClass('box_moved')}

window.swap = function(){
if( direction = !direction )
        forward()
    else
        backward();
}

window.getlocation = function(){
    if(working)
        $('.val').val( $('.box').position().left );
    else
        console.log($('.box').position().left);
    }

window.setInterval("swap()",3000);
window.setInterval("getlocation()",200);

接收元素位于CSS过渡的中间位置

0 个答案: