Question

jQuery中有一个允许创建自定义css属性的东西： https://api.jquery.com/jQuery.cssHooks/

例如，我想向jQuery.transit添加一些功能：https://github.com/rstacruz/jquery.transit

我想让jQuery.transit（left和top中的x和y属性与x和y相同成为transform: translate(x, y)）

因此，根据jQuery.cssHooks手动和内部jQuery.transit API，我添加了left和top：

registerCssHook('left', true);

/* some code */

setter {
  /* some code */
  left: function(x) {
    this.set('translate', x, null);
  },
  /* some code */
}

/* some code */

getter {
  /* some code */
  left: function() {
    return this._translateX || 0;
  },
  /* some code */
}

/* some code */

function registerCssHook(prop, isPixels) {
  // For certain properties, the 'px' should not be implied.
  if (!isPixels) { $.cssNumber[prop] = true; }

  $.transit.propertyMap[prop] = support.transform;

  $.cssHooks[prop] = {
    get: function(elem) {
      var t = $(elem).css('transit:transform');
      return t.get(prop);
    },

    set: function(elem, value) {
      var t = $(elem).css('transit:transform');
      t.setFromString(prop, value);

      $(elem).css({ 'transit:transform': t });
    }
  };
}

一切都很好。现在当我输入

$('.class').css('left', '40px');

所有.class元素获得：

transform: translate(x, y) style
aaand ..仍然是left: x style

jQuery cssHook - 覆盖标准的element.css（）行为

0 个答案: