getBoundingClientRect 在 Chrome 中返回相同的值

Question

我无法让 getBoundingClientRect() 在 Google Chrome 中工作。我的代码如下：

React.js 渲染：

render() {
    return (
        <div className="TapTwo-container" ref="clickContainer" onClick={this._handleTap}>
            <div id="TapTwo-forkContainer" className="TapTwo-forkContainer u-animationLinear u-animationLoop tapTwo-moveForkLeft" ref="fork">
                <img src="img/fork.png" className="tapTwo-fork"/>
            </div>
            <div className="TapTwo-pieContainer">
                <img src="img/pie.png" className="tapTwo-pie" />
                <img src="img/plate.png" className="tapTwo-plate"/>
            </div>
       </div>
    )
}

函数 _handleTap 执行以下操作：

_handleTap() {
    let element = document.getElementById('TapTwo-forkContainer');
    let box = element.getBoundingClientRect()

    let top  = box.top;
    let left = box.left;

    console.log(Math.round(top),Math.round(left));
}

这里要注意的事情：TapTwo-forkContainer 得到动画 + 使用 CSS 转换。它从屏幕左侧向右侧移动，例如关键帧之一：

@-webkit-keyframes moveForkLeft {
    0% {
         transform: translate(0,0);
    }
    100% {
        transform: translate(1250px, 0);
    }
}

当我在 Firefox 中测试它时，每次点击都会根据 TapTwo-forkContainer 的位置获得不同的值。但是，当我在 Google Chrome (41.0.2272.118) 中检查它时，我一遍又一遍地得到相同的值。

这是一个演示（尝试发送垃圾邮件“单击我”按钮并查看控制台中返回的值）

http://jsfiddle.net/d26cpdfk/4/

Answer 1

看起来 getBoundingClientRect 在 Chrome 中有问题。您可以使用 getComputedStyle 获取动画中的 x 或 y 值：

http://jsfiddle.net/d26cpdfk/1/

var element = document.getElementById('element')

    element.addEventListener('click', function(){
        console.log(element.getBoundingClientRect().left)

        var cs = window.getComputedStyle(element).transform
        var x = parseFloat(cs.split(', ')[4])
        console.log('getBoundingClientRect:',element.getBoundingClientRect().left, 'getComputedStyle:',x)
    }, false)

getBoundingClientRect 在 Chrome 中返回相同的值

getBoundingClientRect returning same value in Chrome

javascript

google-chrome

reactjs