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 | } |
---|