javascript - getBoundingClientRect 在 Chrome 中返回相同的值

Question

我在 Google Chrome 中使用 getBoundingClientRect() 时遇到问题。我的代码如下:

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) 中检查它时，我一遍又一遍地得到相同的值。

这是一个演示(尝试向“Click me”按钮发送垃圾邮件并查看控制台中返回的值)

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)