UNPKG

3.62 kBJavaScriptView Raw
1import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2import _extends from "@babel/runtime/helpers/esm/extends";
3const _excluded = ["duration", "easing", "delay"];
4// Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
5// to learn the context in which each easing should be used.
6export const easing = {
7 // This is the most common easing curve.
8 easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
9 // Objects enter the screen at full velocity from off-screen and
10 // slowly decelerate to a resting point.
11 easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
12 // Objects leave the screen at full velocity. They do not decelerate when off-screen.
13 easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
14 // The sharp curve is used by objects that may return to the screen at any time.
15 sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
16}; // Follow https://material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations
17// to learn when use what timing
18
19export const duration = {
20 shortest: 150,
21 shorter: 200,
22 short: 250,
23 // most basic recommended timing
24 standard: 300,
25 // this is to be used in complex animations
26 complex: 375,
27 // recommended when something is entering screen
28 enteringScreen: 225,
29 // recommended when something is leaving screen
30 leavingScreen: 195
31};
32
33function formatMs(milliseconds) {
34 return `${Math.round(milliseconds)}ms`;
35}
36
37function getAutoHeightDuration(height) {
38 if (!height) {
39 return 0;
40 }
41
42 const constant = height / 36; // https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10
43
44 return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
45}
46
47export default function createTransitions(inputTransitions) {
48 const mergedEasing = _extends({}, easing, inputTransitions.easing);
49
50 const mergedDuration = _extends({}, duration, inputTransitions.duration);
51
52 const create = (props = ['all'], options = {}) => {
53 const {
54 duration: durationOption = mergedDuration.standard,
55 easing: easingOption = mergedEasing.easeInOut,
56 delay = 0
57 } = options,
58 other = _objectWithoutPropertiesLoose(options, _excluded);
59
60 if (process.env.NODE_ENV !== 'production') {
61 const isString = value => typeof value === 'string'; // IE11 support, replace with Number.isNaN
62 // eslint-disable-next-line no-restricted-globals
63
64
65 const isNumber = value => !isNaN(parseFloat(value));
66
67 if (!isString(props) && !Array.isArray(props)) {
68 console.error('MUI: Argument "props" must be a string or Array.');
69 }
70
71 if (!isNumber(durationOption) && !isString(durationOption)) {
72 console.error(`MUI: Argument "duration" must be a number or a string but found ${durationOption}.`);
73 }
74
75 if (!isString(easingOption)) {
76 console.error('MUI: Argument "easing" must be a string.');
77 }
78
79 if (!isNumber(delay) && !isString(delay)) {
80 console.error('MUI: Argument "delay" must be a number or a string.');
81 }
82
83 if (Object.keys(other).length !== 0) {
84 console.error(`MUI: Unrecognized argument(s) [${Object.keys(other).join(',')}].`);
85 }
86 }
87
88 return (Array.isArray(props) ? props : [props]).map(animatedProp => `${animatedProp} ${typeof durationOption === 'string' ? durationOption : formatMs(durationOption)} ${easingOption} ${typeof delay === 'string' ? delay : formatMs(delay)}`).join(',');
89 };
90
91 return _extends({
92 getAutoHeightDuration,
93 create
94 }, inputTransitions, {
95 easing: mergedEasing,
96 duration: mergedDuration
97 });
98}
\No newline at end of file