javascript - 获取正在翻译的元素的位置

Question

我正在尝试使用 CSS3 获取另一个具有 overflow:hidden 属性的 div 中正在翻译的 div 的位置。

这是一个演示它的 jsFiddle:https://jsfiddle.net/meeuz3w9

尝试使用 jQuery 的 position().top 获取元素的顶部位置时，该元素的顶部位置不会更新。

我不知道为什么会发生这种情况，有人有解决办法吗？

更新:这不适用于 OSX 上的 Chrome 44，但适用于其他浏览器

Answer 1

玩了一段时间后，我想我有了答案:

这是一个性能问题

Chrome 使用这些资源使动画更加流畅，从而减少脚本调用的回调和更新的位置。

虽然 Firefox 使用资源来保持两者更新，但这使得动画不那么流畅，但脚本获得了更多更新的位置。

在 Chrome 中，调用情况也非常不规则(每个位置 2 到 100 次调用)，而在 Firefox 中，每个位置调用次数低于 4 次。

在此fiddle我尝试在全局变量中使用 native 微积分来获得更好的性能:

var position = function() {
    return this.getBoundingClientRect().top - 
        this.offsetParent.getBoundingClientRect().top;
};

并避免使用console.log ...

var callback = function(){
    var top = position.call(callback.target);
    if(benchmark[top] === undefined){
        benchmark[top] = 0;
    } else {
        benchmark[top] += 1;
    }
};

然后我发现了这个性能差异。

如何解决

您可以在此处获取有关 JavaScript 动画和 CSS 动画之间差异的更多信息: https://css-tricks.com/myth-busting-css-animations-vs-javascript/

读完这篇文章后，我提出以下解决方案:

使用 JavaScript 实现

您描述的动画很简单:

$('#bar').animate({
    'translate3d': '-2000'
}, {
    step: function (now, fx) {
        console.log(now);
        $(this).css({"transform": "translate3d(0px, " + now + "px, 0px)"});
    },
    duration: 1000,
    easing: 'linear',
    queue: false
},
'linear');

这样，您将能够在每个刻度上处理 javascript 上的位置，而不是向 CSS 询问。

希望对您有所帮助。