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

【问题标题】：Javascript : accurate CSS TranslateX ( position ) taking Transform Scale into accountJavascript：准确的 CSS TranslateX（位置）考虑了变换比例
【发布时间】：2014-09-07 17:15:21
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： javascript jquery css coffeescript

【解决方案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 种方法。

【讨论】：