Get divs position after translate3d

前端 未结 3 1513
日久生厌
日久生厌 2021-02-10 00:51

In Javascript, when I move an element using the gpu via the translate3d method, the elements style-left position doesnt change at all. As the cpu isnt even aware any motion has

相关标签:
3条回答
  • 2021-02-10 01:00

    Use Element.getBoundingClientRect() to get the element coordinates

    Here's just a small example that retrieves the .left Rect property from a CSS3 translated (animated) element:

    const box = document.getElementById('box');
    const printer = document.getElementById('printer');
    const printBoxRectLeft = () => {
      printer.textContent = box.getBoundingClientRect().left;
      requestAnimationFrame(printBoxRectLeft);
    };
    
    printBoxRectLeft();
    #box{
      width:30px; height:30px; background:red;
      animation: animX 3s infinite alternate;
    }
    @keyframes animX { to{ transform:translateX(300px); }}
    <div id="printer"></div>
    <div id="box"></div>

    0 讨论(0)
  • 2021-02-10 01:00

    The other answers that use getBoundingClientRect work, but if you want to get the actual numeric values from a translate3d string, use a RegExp:

    var xyzArray;
    let translate3dValue = 'translate3d(256px, 512px, 0px)';
    xyzArray = translate3dValue.replace(/translate3d|px|\(|\)/gi, '').split(',');
    
    0 讨论(0)
  • 2021-02-10 01:19

    The style attribute left is set to auto if you do not set it manually. But you should be able to use the jquery function position().

        var position = $('#element').position();
        var left = position.left;
    

    http://jsfiddle.net/nqab2aw7/2/

    0 讨论(0)
提交回复
热议问题