101 lines
3.1 KiB
JavaScript
101 lines
3.1 KiB
JavaScript
// ----- SIZE -----
|
|
const sizeValuesForOrientation = (orientation, element)=>{
|
|
const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';
|
|
const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';
|
|
const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;
|
|
const toSize = `${measuredSize}px`;
|
|
return {
|
|
sizeName,
|
|
overflowName,
|
|
toSize
|
|
};
|
|
};
|
|
export const sizeEnterAtom = ({ orientation, duration, easing, element, outSize = '0', delay = 0 })=>{
|
|
const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);
|
|
return {
|
|
keyframes: [
|
|
{
|
|
[sizeName]: outSize,
|
|
[overflowName]: 'hidden'
|
|
},
|
|
{
|
|
[sizeName]: toSize,
|
|
offset: 0.9999,
|
|
[overflowName]: 'hidden'
|
|
},
|
|
{
|
|
[sizeName]: 'unset',
|
|
[overflowName]: 'unset'
|
|
}
|
|
],
|
|
duration,
|
|
easing,
|
|
delay,
|
|
fill: 'both'
|
|
};
|
|
};
|
|
export const sizeExitAtom = ({ orientation, duration, easing, element, delay = 0, outSize = '0' })=>{
|
|
const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);
|
|
return {
|
|
keyframes: [
|
|
{
|
|
[sizeName]: toSize,
|
|
[overflowName]: 'hidden'
|
|
},
|
|
{
|
|
[sizeName]: outSize,
|
|
[overflowName]: 'hidden'
|
|
}
|
|
],
|
|
duration,
|
|
easing,
|
|
delay,
|
|
fill: 'both'
|
|
};
|
|
};
|
|
// ----- WHITESPACE -----
|
|
// Whitespace animation includes padding and margin.
|
|
const whitespaceValuesForOrientation = (orientation)=>{
|
|
// horizontal whitespace collapse
|
|
if (orientation === 'horizontal') {
|
|
return {
|
|
paddingStart: 'paddingInlineStart',
|
|
paddingEnd: 'paddingInlineEnd',
|
|
marginStart: 'marginInlineStart',
|
|
marginEnd: 'marginInlineEnd'
|
|
};
|
|
}
|
|
// vertical whitespace collapse
|
|
return {
|
|
paddingStart: 'paddingBlockStart',
|
|
paddingEnd: 'paddingBlockEnd',
|
|
marginStart: 'marginBlockStart',
|
|
marginEnd: 'marginBlockEnd'
|
|
};
|
|
};
|
|
/**
|
|
* A collapse animates an element's height to zero,
|
|
but the zero height does not eliminate padding or margin in the box model.
|
|
So here we generate keyframes to animate those whitespace properties to zero.
|
|
*/ export const whitespaceAtom = ({ direction, orientation, duration, easing, delay = 0 })=>{
|
|
const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);
|
|
// The keyframe with zero whitespace is at the start for enter and at the end for exit.
|
|
const offset = direction === 'enter' ? 0 : 1;
|
|
const keyframes = [
|
|
{
|
|
[paddingStart]: '0',
|
|
[paddingEnd]: '0',
|
|
[marginStart]: '0',
|
|
[marginEnd]: '0',
|
|
offset
|
|
}
|
|
];
|
|
return {
|
|
keyframes,
|
|
duration,
|
|
easing,
|
|
delay,
|
|
fill: 'both'
|
|
};
|
|
};
|