You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

transition.js 2.8 KiB

3 年之前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.default = transition;
  6. var _hyphenateProperty = require('css-in-js-utils/lib/hyphenateProperty');
  7. var _hyphenateProperty2 = _interopRequireDefault(_hyphenateProperty);
  8. var _isPrefixedValue = require('css-in-js-utils/lib/isPrefixedValue');
  9. var _isPrefixedValue2 = _interopRequireDefault(_isPrefixedValue);
  10. var _capitalizeString = require('../../utils/capitalizeString');
  11. var _capitalizeString2 = _interopRequireDefault(_capitalizeString);
  12. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  13. var properties = {
  14. transition: true,
  15. transitionProperty: true,
  16. WebkitTransition: true,
  17. WebkitTransitionProperty: true,
  18. MozTransition: true,
  19. MozTransitionProperty: true
  20. };
  21. var prefixMapping = {
  22. Webkit: '-webkit-',
  23. Moz: '-moz-',
  24. ms: '-ms-'
  25. };
  26. function prefixValue(value, propertyPrefixMap) {
  27. if ((0, _isPrefixedValue2.default)(value)) {
  28. return value;
  29. }
  30. // only split multi values, not cubic beziers
  31. var multipleValues = value.split(/,(?![^()]*(?:\([^()]*\))?\))/g);
  32. for (var i = 0, len = multipleValues.length; i < len; ++i) {
  33. var singleValue = multipleValues[i];
  34. var values = [singleValue];
  35. for (var property in propertyPrefixMap) {
  36. var dashCaseProperty = (0, _hyphenateProperty2.default)(property);
  37. if (singleValue.indexOf(dashCaseProperty) > -1 && dashCaseProperty !== 'order') {
  38. var prefixes = propertyPrefixMap[property];
  39. for (var j = 0, pLen = prefixes.length; j < pLen; ++j) {
  40. // join all prefixes and create a new value
  41. values.unshift(singleValue.replace(dashCaseProperty, prefixMapping[prefixes[j]] + dashCaseProperty));
  42. }
  43. }
  44. }
  45. multipleValues[i] = values.join(',');
  46. }
  47. return multipleValues.join(',');
  48. }
  49. function transition(property, value, style, propertyPrefixMap) {
  50. // also check for already prefixed transitions
  51. if (typeof value === 'string' && properties.hasOwnProperty(property)) {
  52. var outputValue = prefixValue(value, propertyPrefixMap);
  53. // if the property is already prefixed
  54. var webkitOutput = outputValue.split(/,(?![^()]*(?:\([^()]*\))?\))/g).filter(function (val) {
  55. return !/-moz-|-ms-/.test(val);
  56. }).join(',');
  57. if (property.indexOf('Webkit') > -1) {
  58. return webkitOutput;
  59. }
  60. var mozOutput = outputValue.split(/,(?![^()]*(?:\([^()]*\))?\))/g).filter(function (val) {
  61. return !/-webkit-|-ms-/.test(val);
  62. }).join(',');
  63. if (property.indexOf('Moz') > -1) {
  64. return mozOutput;
  65. }
  66. style['Webkit' + (0, _capitalizeString2.default)(property)] = webkitOutput;
  67. style['Moz' + (0, _capitalizeString2.default)(property)] = mozOutput;
  68. return outputValue;
  69. }
  70. }
  71. module.exports = exports['default'];