|
|
|
@ -98,23 +98,27 @@ export interface SlideParams {
|
|
|
|
|
delay?: number;
|
|
|
|
|
duration?: number;
|
|
|
|
|
easing?: EasingFunction;
|
|
|
|
|
axis?: 'x' | 'y';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function slide(node: Element, {
|
|
|
|
|
delay = 0,
|
|
|
|
|
duration = 400,
|
|
|
|
|
easing = cubicOut
|
|
|
|
|
easing = cubicOut,
|
|
|
|
|
axis = 'y'
|
|
|
|
|
}: SlideParams = {}): TransitionConfig {
|
|
|
|
|
const style = getComputedStyle(node);
|
|
|
|
|
const opacity = +style.opacity;
|
|
|
|
|
const height = parseFloat(style.height);
|
|
|
|
|
const padding_top = parseFloat(style.paddingTop);
|
|
|
|
|
const padding_bottom = parseFloat(style.paddingBottom);
|
|
|
|
|
const margin_top = parseFloat(style.marginTop);
|
|
|
|
|
const margin_bottom = parseFloat(style.marginBottom);
|
|
|
|
|
const border_top_width = parseFloat(style.borderTopWidth);
|
|
|
|
|
const border_bottom_width = parseFloat(style.borderBottomWidth);
|
|
|
|
|
|
|
|
|
|
const primary_property = axis === 'y' ? 'height' : 'width';
|
|
|
|
|
const primary_property_value = parseFloat(style[primary_property]);
|
|
|
|
|
const secondary_properties = axis === 'y' ? ['top', 'bottom'] : ['left', 'right'];
|
|
|
|
|
const capitalized_secondary_properties = secondary_properties.map((e) => `${e[0].toUpperCase()}${e.slice(1)}`);
|
|
|
|
|
const padding_start_value = parseFloat(style[`padding${capitalized_secondary_properties[0]}`]);
|
|
|
|
|
const padding_end_value = parseFloat(style[`padding${capitalized_secondary_properties[1]}`]);
|
|
|
|
|
const margin_start_value = parseFloat(style[`margin${capitalized_secondary_properties[0]}`]);
|
|
|
|
|
const margin_end_value = parseFloat(style[`margin${capitalized_secondary_properties[1]}`]);
|
|
|
|
|
const border_width_start_value = parseFloat(style[`border${capitalized_secondary_properties[0]}Width`]);
|
|
|
|
|
const border_width_end_value = parseFloat(style[`border${capitalized_secondary_properties[1]}Width`]);
|
|
|
|
|
return {
|
|
|
|
|
delay,
|
|
|
|
|
duration,
|
|
|
|
@ -122,13 +126,13 @@ export function slide(node: Element, {
|
|
|
|
|
css: t =>
|
|
|
|
|
'overflow: hidden;' +
|
|
|
|
|
`opacity: ${Math.min(t * 20, 1) * opacity};` +
|
|
|
|
|
`height: ${t * height}px;` +
|
|
|
|
|
`padding-top: ${t * padding_top}px;` +
|
|
|
|
|
`padding-bottom: ${t * padding_bottom}px;` +
|
|
|
|
|
`margin-top: ${t * margin_top}px;` +
|
|
|
|
|
`margin-bottom: ${t * margin_bottom}px;` +
|
|
|
|
|
`border-top-width: ${t * border_top_width}px;` +
|
|
|
|
|
`border-bottom-width: ${t * border_bottom_width}px;`
|
|
|
|
|
`${primary_property}: ${t * primary_property_value}px;` +
|
|
|
|
|
`padding-${secondary_properties[0]}: ${t * padding_start_value}px;` +
|
|
|
|
|
`padding-${secondary_properties[1]}: ${t * padding_end_value}px;` +
|
|
|
|
|
`margin-${secondary_properties[0]}: ${t * margin_start_value}px;` +
|
|
|
|
|
`margin-${secondary_properties[1]}: ${t * margin_end_value}px;` +
|
|
|
|
|
`border-${secondary_properties[0]}-width: ${t * border_width_start_value}px;` +
|
|
|
|
|
`border-${secondary_properties[1]}-width: ${t * border_width_end_value}px;`
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|