|
|
@ -12,18 +12,20 @@ export interface TransitionConfig {
|
|
|
|
interface BlurParams {
|
|
|
|
interface BlurParams {
|
|
|
|
delay: number;
|
|
|
|
delay: number;
|
|
|
|
duration: number;
|
|
|
|
duration: number;
|
|
|
|
|
|
|
|
amount: number;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export function blur(node: Element, {
|
|
|
|
export function blur(node: Element, {
|
|
|
|
delay = 0,
|
|
|
|
delay = 0,
|
|
|
|
duration = 400
|
|
|
|
duration = 400,
|
|
|
|
|
|
|
|
amount = 5
|
|
|
|
}: BlurParams): TransitionConfig {
|
|
|
|
}: BlurParams): TransitionConfig {
|
|
|
|
const f = +getComputedStyle(node).filter;
|
|
|
|
const f = getComputedStyle(node).filter.replace(/^none$/, '');
|
|
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
delay,
|
|
|
|
delay,
|
|
|
|
duration,
|
|
|
|
duration,
|
|
|
|
css: t => `filter: blur(${t * f})`
|
|
|
|
css: (t, u) => `opacity: ${t}; filter: ${f} blur(${u * amount}px);`
|
|
|
|
};
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|