Javascript : accurate CSS TranslateX ( position ) taking Transform Scale into account

Question

我使用 transform : scale(0.25) 将 div.parent 缩放 n%。 div.parent 的宽度非常大，超出了视口(viewport)边界。这个容器 div 有 n 个 child ，每个 child 都有一个相对的偏移位置，我通过 jQuery 得到它，比如(近似)

parent  = $ '.parent'
child   = $ '.child'
posLeft = child.position().left  

然后我使用值 posLeft 移动 div.parent 容器。

 parent.css
    transform : "translate3d( #{posLeft}px, 0, 0 )"

我想通过允许它继续移动div.parent来扩展处理上述动画的函数(如相关到子元素 posLeft )当它被缩小时。这是一张有助于说明问题的图片。

Answer 1

事实证明，解决方案非常简单——在消除了我的代码中的一些错误之后。对于任何其他有兴趣做类似事情的人，我将发布下面代码的近似值(它使用 TweenMax 来处理转换)

 _state = 
     scale : 1

 state: ( state, value )-> 
     if value is undefined
         return _state[state] 
     else 
         _state[state] = value 

 calculateDistance( distance, scale )->
     newDistance = distance * scale
     return newDistance 


 scaleDown = ( amount )->
     if amount > 1 then amount = 1

     props =
         x                   : 0 
         scale               : amount 
         transformOrigin     : 'center left'
         onComplete          : Done 

         TweenMax.to container, 0.4, props 

  Done =->
      num = this.vars.css.scale 

      state( 'scale', num )

以及如何使用calculateDistance()

location =  calculateDistance( move.destination.attr( 'data-location' ), state('scale' ) )

这使我能够对任何转换的缩放版本和完整版本使用一种方法。