transitions.js 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. "use strict";
  2. exports.__esModule = true;
  3. exports["default"] = transitions;
  4. var _errors = _interopRequireDefault(require("../internalHelpers/_errors"));
  5. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
  6. /**
  7. * 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).
  8. * @example
  9. * // Styles as object usage
  10. * const styles = {
  11. * ...transitions('opacity 1.0s ease-in 0s', 'width 2.0s ease-in 2s'),
  12. * ...transitions(['color', 'background-color'], '2.0s ease-in 2s')
  13. * }
  14. *
  15. * // styled-components usage
  16. * const div = styled.div`
  17. * ${transitions('opacity 1.0s ease-in 0s', 'width 2.0s ease-in 2s')};
  18. * ${transitions(['color', 'background-color'], '2.0s ease-in 2s'),};
  19. * `
  20. *
  21. * // CSS as JS Output
  22. *
  23. * div {
  24. * 'transition': 'opacity 1.0s ease-in 0s, width 2.0s ease-in 2s'
  25. * 'transition': 'color 2.0s ease-in 2s, background-color 2.0s ease-in 2s',
  26. * }
  27. */
  28. function transitions() {
  29. for (var _len = arguments.length, properties = new Array(_len), _key = 0; _key < _len; _key++) {
  30. properties[_key] = arguments[_key];
  31. }
  32. if (Array.isArray(properties[0]) && properties.length === 2) {
  33. var value = properties[1];
  34. if (typeof value !== 'string') {
  35. throw new _errors["default"](61);
  36. }
  37. var transitionsString = properties[0].map(function (property) {
  38. return property + " " + value;
  39. }).join(', ');
  40. return {
  41. transition: transitionsString
  42. };
  43. } else {
  44. return {
  45. transition: properties.join(', ')
  46. };
  47. }
  48. }
  49. module.exports = exports.default;