jquery - 转变个人值(value)观而不重写自己

Question

我想为不会覆盖自身的单个转换值创建 css Hook ，因此:

$(selector).css('rotateY',-20);
$(selector).css('rotateX',80);

会变成这样(应用正确的前缀):

-webkit-transform: rotateY(-20deg) rotateY(80deg);

我找到了 transform csshooks，但它们并不完全符合我的要求: https://github.com/louisremi/jquery.transform.js尽管这些 css 钩子(Hook)似乎在跨浏览器(甚至 IE)上做得很好，但它们不允许在不必编写整个转换(使用旧值)的情况下进行单独的转换。

Answer 1

你在正确的轨道上......使用cssHooks是扩展/覆盖 jQuery 应如何处理获取和设置 css 属性的常用方法。

这是一个非常非常……简单的例子来说明如何做到这一点:

function createTransformHook(transformFunction, unitless) {
  var transformProperty = 'transform', transformList

  $.cssHooks[transformFunction] = {
    get: function(elem) {
      return ($.data(elem, transformProperty) || {})[transformFunction]
    },
    set: function(elem, value) {
      transformList = $.data(elem, transformProperty) || {}
      transformList[transformFunction] = value
      $.data(elem, transformProperty, transformList)
      $.style(elem, transformProperty, $.map(transformList, function(value, key) {
        return key + '(' + value + ')'
      }).join(' '))
    }
  }

  $.fx.step[transformFunction] = function(fx) {
    $.cssHooks[transformFunction].set(fx.elem, fx.now + fx.unit)
  }

  if (unitless) {
    $.cssNumber[transformFunction] = true
  }
}

此函数采用 transform-function和可选的第二个参数，将其声明为无单位属性(不要自动添加 'px')。它还将属性添加到全局 jQuery.fx.step 对象，这使得使用 jQuery 的默认动画函数为值设置动画成为可能。

您可以按如下方式使用它:

createTransformHook('translateX')
createTransformHook('translateY')
createTransformHook('rotateX', true)
createTransformHook('rotateY', true)
createTransformHook('rotate', true)
createTransformHook('scaleX', true)
createTransformHook('scaleY', true)
createTransformHook('scale', true)
// etc...

...然后像任何其他 css 属性一样编写您的转换:

$(selector).css({
  translateX: '-50%',
  translateY: '-50%',
  rotate: '45deg'
})

https://fiddle.jshell.net/88w1b2qq/

如前所述，它真的很简单和天真，只是一个例子......

---

$.cssHooks[transformFunction]

Hook directly into jQuery to override how particular CSS properties are retrieved or set, normalize CSS property naming, or create custom properties.

$.fx.step[transformFunction]

A css hook can also hook into jQuery's animation mechanism by adding a property to the jQuery.fx.step object

$.cssNumber[transformFunction]

An object containing all CSS properties that may be used without a unit. The .css() method uses this object to see if it may append px to unitless values

深入研究

• > http://code.jquery.com/jquery-latest.js (从这里开始!)
• > https://github.com/brandonaaron/jquery-cssHooks
• > https://github.com/zachstronaut/jquery-animate-css-rotate-scale/
• > https://github.com/metafizzy/isotope/blob/a2a238968347199842dd7e2d552741d5a63c90b9/jquery.isotope.js
• > http://awardwinningfjords.com/2011/05/06/trigger-css3-animations-with-jquery.html
• > http://blog.bigbinary.com/2010/01/25/how-animate-really-works-in-jquery-simple-animation-case-discussed.html