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.
		
		
		
		
		
			
		
			
				
					57 lines
				
				1.7 KiB
			
		
		
			
		
	
	
					57 lines
				
				1.7 KiB
			| 
											3 years ago
										 | "use strict"; | ||
|  | 
 | ||
|  | exports.__esModule = true; | ||
|  | exports["default"] = transitions; | ||
|  | 
 | ||
|  | var _errors = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("../internalHelpers/_errors")); | ||
|  | 
 | ||
|  | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } | ||
|  | 
 | ||
|  | /** | ||
|  |  * Accepts any number of transition values as parameters for creating a single transition statement. You may also pass an array of properties as the first parameter that you would like to apply the same transition values to (second parameter). | ||
|  |  * @example | ||
|  |  * // Styles as object usage
 | ||
|  |  * const styles = { | ||
|  |  *   ...transitions('opacity 1.0s ease-in 0s', 'width 2.0s ease-in 2s'), | ||
|  |  *   ...transitions(['color', 'background-color'], '2.0s ease-in 2s') | ||
|  |  * } | ||
|  |  * | ||
|  |  * // styled-components usage
 | ||
|  |  * const div = styled.div`
 | ||
|  |  *   ${transitions('opacity 1.0s ease-in 0s', 'width 2.0s ease-in 2s')}; | ||
|  |  *   ${transitions(['color', 'background-color'], '2.0s ease-in 2s'),}; | ||
|  |  * `
 | ||
|  |  * | ||
|  |  * // CSS as JS Output
 | ||
|  |  * | ||
|  |  * div { | ||
|  |  *   'transition': 'opacity 1.0s ease-in 0s, width 2.0s ease-in 2s' | ||
|  |  *   'transition': 'color 2.0s ease-in 2s, background-color 2.0s ease-in 2s', | ||
|  |  * } | ||
|  |  */ | ||
|  | function transitions() { | ||
|  |   for (var _len = arguments.length, properties = new Array(_len), _key = 0; _key < _len; _key++) { | ||
|  |     properties[_key] = arguments[_key]; | ||
|  |   } | ||
|  | 
 | ||
|  |   if (Array.isArray(properties[0]) && properties.length === 2) { | ||
|  |     var value = properties[1]; | ||
|  | 
 | ||
|  |     if (typeof value !== 'string') { | ||
|  |       throw new _errors["default"](61); | ||
|  |     } | ||
|  | 
 | ||
|  |     var transitionsString = properties[0].map(function (property) { | ||
|  |       return property + " " + value; | ||
|  |     }).join(', '); | ||
|  |     return { | ||
|  |       transition: transitionsString | ||
|  |     }; | ||
|  |   } else { | ||
|  |     return { | ||
|  |       transition: properties.join(', ') | ||
|  |     }; | ||
|  |   } | ||
|  | } | ||
|  | 
 | ||
|  | module.exports = exports.default; |