Javascript：准确的CSS TranslateX（位置）考虑到变换比例

Question

我使用div.parent将transform : scale( 0.25 )缩放n％。 div.parent的宽度非常大，超出了视口范围。这个容器div有n个子节点，每个子节点都有一个相对偏移的位置，我通过jQuery得到的像（近似值）

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

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

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

我想扩展处理上述动画的function，允许它准确地继续移动 div.parent（与子项{{1}相关）当它缩小时。这是一张有助于阐明问题的图片。

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' ) )

这使我可以对任何过渡的缩放版本和完整版本使用1方法。