获取被翻译元素的位置

Question

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

下面是一个jsFiddle演示它:https://jsfiddle.net/meeuz3w9

元素的顶部位置不更新时，试图获得它与jQuery的position().top。

我不知道为什么会发生这种情况，有人有解决方案吗?

更新:这不能在Chrome 44在OSX上工作，但在其他浏览器上工作

Answer 1

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

这是一个性能问题

Chrome使用资源使动画更加流畅，使脚本得到更少的回调调用和更少的位置更新。

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

在Chrome中，呼叫的配置文件也非常不规则(每个位置在2到100次之间)，而在Firefox中，每个位置保持在4次以下。

在这个小提琴我试图得到更好的性能，使用本地演算在一个全局变量:

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请求。