msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

allow custom css declarations for transitions

Browse Source
pull/6211/head
bastinald 5 years ago committed by GitHub
parent 370dd4d81b
commit 7305cdda97
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 15 deletions
Show Stats Download Patch File Download Diff File

44
src/runtime/transition/index.ts
Unescape View File

@ -17,6 +17,7 @@ export interface BlurParams {
easing?: EasingFunction; easing?: EasingFunction;
amount?: number; amount?: number;
opacity?: number; opacity?: number;
css?: string;
} }
export function blur(node: Element, { export function blur(node: Element, {
@ -24,7 +25,8 @@ export function blur(node: Element, {
duration = 400, duration = 400,
easing = cubicInOut, easing = cubicInOut,
amount = 5, amount = 5,
opacity = 0 opacity = 0,
css = ""
}: BlurParams = {}): TransitionConfig { }: BlurParams = {}): TransitionConfig {
const style = getComputedStyle(node); const style = getComputedStyle(node);
const target_opacity = +style.opacity; const target_opacity = +style.opacity;
@ -36,7 +38,7 @@ export function blur(node: Element, {
delay, delay,
duration, duration,
easing, easing,
css: (_t, u) => `opacity: ${target_opacity - (od * u)}; filter: ${f} blur(${u * amount}px);` css: (_t, u) => `opacity: ${target_opacity - (od * u)}; filter: ${f} blur(${u * amount}px);` + css
}; };
} }
@ -44,12 +46,14 @@ export interface FadeParams {
delay?: number; delay?: number;
duration?: number; duration?: number;
easing?: EasingFunction; easing?: EasingFunction;
css?: string;
} }
export function fade(node: Element, { export function fade(node: Element, {
delay = 0, delay = 0,
duration = 400, duration = 400,
easing = linear easing = linear,
css = ""
}: FadeParams = {}): TransitionConfig { }: FadeParams = {}): TransitionConfig {
const o = +getComputedStyle(node).opacity; const o = +getComputedStyle(node).opacity;
@ -57,7 +61,7 @@ export function fade(node: Element, {
delay, delay,
duration, duration,
easing, easing,
css: t => `opacity: ${t * o}` css: t => `opacity: ${t * o};` + css
}; };
} }
@ -68,6 +72,7 @@ export interface FlyParams {
x?: number; x?: number;
y?: number; y?: number;
opacity?: number; opacity?: number;
css?: string;
} }
export function fly(node: Element, { export function fly(node: Element, {
@ -76,7 +81,8 @@ export function fly(node: Element, {
easing = cubicOut, easing = cubicOut,
x = 0, x = 0,
y = 0, y = 0,
opacity = 0 opacity = 0,
css = ""
}: FlyParams = {}): TransitionConfig { }: FlyParams = {}): TransitionConfig {
const style = getComputedStyle(node); const style = getComputedStyle(node);
const target_opacity = +style.opacity; const target_opacity = +style.opacity;
@ -90,7 +96,7 @@ export function fly(node: Element, {
easing, easing,
css: (t, u) => ` css: (t, u) => `
transform: ${transform} translate(${(1 - t) * x}px, ${(1 - t) * y}px); transform: ${transform} translate(${(1 - t) * x}px, ${(1 - t) * y}px);
opacity: ${target_opacity - (od * u)}` opacity: ${target_opacity - (od * u)};` + css
}; };
} }
@ -98,12 +104,14 @@ export interface SlideParams {
delay?: number; delay?: number;
duration?: number; duration?: number;
easing?: EasingFunction; easing?: EasingFunction;
css?: string;
} }
export function slide(node: Element, { export function slide(node: Element, {
delay = 0, delay = 0,
duration = 400, duration = 400,
easing = cubicOut easing = cubicOut,
css = ""
}: SlideParams = {}): TransitionConfig { }: SlideParams = {}): TransitionConfig {
const style = getComputedStyle(node); const style = getComputedStyle(node);
const opacity = +style.opacity; const opacity = +style.opacity;
@ -128,7 +136,7 @@ export function slide(node: Element, {
`margin-top: ${t * margin_top}px;` + `margin-top: ${t * margin_top}px;` +
`margin-bottom: ${t * margin_bottom}px;` + `margin-bottom: ${t * margin_bottom}px;` +
`border-top-width: ${t * border_top_width}px;` + `border-top-width: ${t * border_top_width}px;` +
`border-bottom-width: ${t * border_bottom_width}px;` `border-bottom-width: ${t * border_bottom_width}px;` + css
}; };
} }
@ -138,6 +146,7 @@ export interface ScaleParams {
easing?: EasingFunction; easing?: EasingFunction;
start?: number; start?: number;
opacity?: number; opacity?: number;
css?: string;
} }
export function scale(node: Element, { export function scale(node: Element, {
@ -145,7 +154,8 @@ export function scale(node: Element, {
duration = 400, duration = 400,
easing = cubicOut, easing = cubicOut,
start = 0, start = 0,
opacity = 0 opacity = 0,
css = ""
}: ScaleParams = {}): TransitionConfig { }: ScaleParams = {}): TransitionConfig {
const style = getComputedStyle(node); const style = getComputedStyle(node);
const target_opacity = +style.opacity; const target_opacity = +style.opacity;
@ -160,8 +170,8 @@ export function scale(node: Element, {
easing, easing,
css: (_t, u) => ` css: (_t, u) => `
transform: ${transform} scale(${1 - (sd * u)}); transform: ${transform} scale(${1 - (sd * u)});
opacity: ${target_opacity - (od * u)} opacity: ${target_opacity - (od * u)};
` ` + css
}; };
} }
@ -170,13 +180,15 @@ export interface DrawParams {
speed?: number; speed?: number;
duration?: number | ((len: number) => number); duration?: number | ((len: number) => number);
easing?: EasingFunction; easing?: EasingFunction;
css?: string;
} }
export function draw(node: SVGElement & { getTotalLength(): number }, { export function draw(node: SVGElement & { getTotalLength(): number }, {
delay = 0, delay = 0,
speed, speed,
duration, duration,
easing = cubicInOut easing = cubicInOut,
css = ""
}: DrawParams = {}): TransitionConfig { }: DrawParams = {}): TransitionConfig {
const len = node.getTotalLength(); const len = node.getTotalLength();
@ -194,7 +206,7 @@ export function draw(node: SVGElement & { getTotalLength(): number }, {
delay, delay,
duration, duration,
easing, easing,
css: (t, u) => `stroke-dasharray: ${t * len} ${u * len}` css: (t, u) => `stroke-dasharray: ${t * len} ${u * len};` + css
}; };
} }
@ -202,6 +214,7 @@ export interface CrossfadeParams {
delay?: number; delay?: number;
duration?: number | ((len: number) => number); duration?: number | ((len: number) => number);
easing?: EasingFunction; easing?: EasingFunction;
css?: string;
} }
type ClientRectMap = Map<any, { rect: ClientRect }>; type ClientRectMap = Map<any, { rect: ClientRect }>;
@ -216,7 +229,8 @@ export function crossfade({ fallback, ...defaults }: CrossfadeParams & {
const { const {
delay = 0, delay = 0,
duration = d => Math.sqrt(d) * 30, duration = d => Math.sqrt(d) * 30,
easing = cubicOut easing = cubicOut,
css = ""
} = assign(assign({}, defaults), params); } = assign(assign({}, defaults), params);
const to = node.getBoundingClientRect(); const to = node.getBoundingClientRect();
@ -238,7 +252,7 @@ export function crossfade({ fallback, ...defaults }: CrossfadeParams & {
opacity: ${t * opacity}; opacity: ${t * opacity};
transform-origin: top left; transform-origin: top left;
transform: ${transform} translate(${u * dx}px,${u * dy}px) scale(${t + (1 - t) * dw}, ${t + (1 - t) * dh}); transform: ${transform} translate(${u * dx}px,${u * dy}px) scale(${t + (1 - t) * dw}, ${t + (1 - t) * dh});
` ` + css
}; };
} }

Write Preview
Loading…
Cancel
Save