Files F99836863

createTransitions.js
No OneTemporary
Actions

Subscribers

None

File Metadata

Created: Sun, Jan 26, 21:31

createTransitions.js
View Options

	import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
	import _extends from "@babel/runtime/helpers/esm/extends";
	const _excluded = ["duration", "easing", "delay"];
	// Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves
	// to learn the context in which each easing should be used.
	export const easing = {
	// This is the most common easing curve.
	easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
	// Objects enter the screen at full velocity from off-screen and
	// slowly decelerate to a resting point.
	easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
	// Objects leave the screen at full velocity. They do not decelerate when off-screen.
	easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
	// The sharp curve is used by objects that may return to the screen at any time.
	sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
	};

	// Follow https://m2.material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations
	// to learn when use what timing
	export const duration = {
	shortest: 150,
	shorter: 200,
	short: 250,
	// most basic recommended timing
	standard: 300,
	// this is to be used in complex animations
	complex: 375,
	// recommended when something is entering screen
	enteringScreen: 225,
	// recommended when something is leaving screen
	leavingScreen: 195
	};
	function formatMs(milliseconds) {
	return `${Math.round(milliseconds)}ms`;
	}
	function getAutoHeightDuration(height) {
	if (!height) {
	return 0;
	}
	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
	return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
	}
	export default function createTransitions(inputTransitions) {
	const mergedEasing = _extends({}, easing, inputTransitions.easing);
	const mergedDuration = _extends({}, duration, inputTransitions.duration);
	const create = (props = ['all'], options = {}) => {
	const {
	duration: durationOption = mergedDuration.standard,
	easing: easingOption = mergedEasing.easeInOut,
	delay = 0
	} = options,
	other = _objectWithoutPropertiesLoose(options, _excluded);
	if (process.env.NODE_ENV !== 'production') {
	const isString = value => typeof value === 'string';
	// IE11 support, replace with Number.isNaN
	// eslint-disable-next-line no-restricted-globals
	const isNumber = value => !isNaN(parseFloat(value));
	if (!isString(props) && !Array.isArray(props)) {
	console.error('MUI: Argument "props" must be a string or Array.');
	}
	if (!isNumber(durationOption) && !isString(durationOption)) {
	console.error(`MUI: Argument "duration" must be a number or a string but found ${durationOption}.`);
	}
	if (!isString(easingOption)) {
	console.error('MUI: Argument "easing" must be a string.');
	}
	if (!isNumber(delay) && !isString(delay)) {
	console.error('MUI: Argument "delay" must be a number or a string.');
	}
	if (Object.keys(other).length !== 0) {
	console.error(`MUI: Unrecognized argument(s) [${Object.keys(other).join(',')}].`);
	}
	}
	return (Array.isArray(props) ? props : [props]).map(animatedProp => `${animatedProp} ${typeof durationOption === 'string' ? durationOption : formatMs(durationOption)} ${easingOption} ${typeof delay === 'string' ? delay : formatMs(delay)}`).join(',');
	};
	return _extends({
	getAutoHeightDuration,
	create
	}, inputTransitions, {
	easing: mergedEasing,
	duration: mergedDuration
	});
	}

Event Timeline