|
|
|
@ -98,14 +98,14 @@ export interface SlideParams {
|
|
|
|
delay?: number;
|
|
|
|
delay?: number;
|
|
|
|
duration?: number;
|
|
|
|
duration?: number;
|
|
|
|
easing?: EasingFunction;
|
|
|
|
easing?: EasingFunction;
|
|
|
|
axis?: "x" | "y";
|
|
|
|
axis?: 'x' | 'y';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export function slide(node: Element, {
|
|
|
|
export function slide(node: Element, {
|
|
|
|
delay = 0,
|
|
|
|
delay = 0,
|
|
|
|
duration = 400,
|
|
|
|
duration = 400,
|
|
|
|
easing = cubicOut,
|
|
|
|
easing = cubicOut,
|
|
|
|
axis = "y"
|
|
|
|
axis = 'y'
|
|
|
|
}: SlideParams = {}): TransitionConfig {
|
|
|
|
}: SlideParams = {}): TransitionConfig {
|
|
|
|
const style = getComputedStyle(node);
|
|
|
|
const style = getComputedStyle(node);
|
|
|
|
const opacity = +style.opacity;
|
|
|
|
const opacity = +style.opacity;
|
|
|
|
@ -129,8 +129,8 @@ export function slide(node: Element, {
|
|
|
|
duration,
|
|
|
|
duration,
|
|
|
|
easing,
|
|
|
|
easing,
|
|
|
|
css: t =>
|
|
|
|
css: t =>
|
|
|
|
`--yAxisT: ${axis === "y" ? t : 1};` +
|
|
|
|
`--y_axis_t: ${axis === 'y' ? t : 1};` +
|
|
|
|
`--xAxisT: ${axis === "x" ? t : 1};` +
|
|
|
|
`--x_axis_t: ${axis === 'x' ? t : 1};` +
|
|
|
|
'overflow: hidden;' +
|
|
|
|
'overflow: hidden;' +
|
|
|
|
`opacity: ${Math.min(t * 20, 1) * opacity};` +
|
|
|
|
`opacity: ${Math.min(t * 20, 1) * opacity};` +
|
|
|
|
`height: calc(var(--yAxisT) * ${height}px);` +
|
|
|
|
`height: calc(var(--yAxisT) * ${height}px);` +
|
|
|
|
|