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