add `direction` param to transition generators

pull/4019/head
mrkishi 6 years ago
parent 2b0762f930
commit 56b5ac94c9

@ -67,10 +67,15 @@ export function transition_out(block, local: 0 | 1, detach: 0 | 1, callback) {
const null_transition: TransitionConfig = { duration: 0 }; const null_transition: TransitionConfig = { duration: 0 };
type TransitionFn = (node: Element, params: any) => TransitionConfig; type TransitionParams = { direction: 'in' | 'out' | 'both' };
type TransitionGenerator = (transition: TransitionParams) => TransitionConfig;
type TransitionFn = (node: Element, params: any, transition: TransitionParams)
=> TransitionConfig | TransitionGenerator;
export function create_in_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any) { export function create_in_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any) {
let config = fn(node, params); let config = fn(node, params, { direction: 'in' }) as TransitionConfig;
const generator = is_function(config) ? config : null;
let running = false; let running = false;
let animation_name; let animation_name;
let task; let task;
@ -129,8 +134,8 @@ export function create_in_transition(node: Element & ElementCSSInlineStyle, fn:
delete_rule(node); delete_rule(node);
if (is_function(config)) { if (generator) {
config = config(); config = generator({ direction: 'in' });
wait().then(go); wait().then(go);
} else { } else {
go(); go();
@ -151,7 +156,9 @@ export function create_in_transition(node: Element & ElementCSSInlineStyle, fn:
} }
export function create_out_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any) { export function create_out_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any) {
let config = fn(node, params); let config = fn(node, params, { direction: 'out' }) as TransitionConfig;
const generator = is_function(config) ? config : null;
let running = true; let running = true;
let animation_name; let animation_name;
@ -201,10 +208,9 @@ export function create_out_transition(node: Element & ElementCSSInlineStyle, fn:
}); });
} }
if (is_function(config)) { if (generator) {
wait().then(() => { wait().then(() => {
// @ts-ignore config = generator({ direction: 'out' });
config = config();
go(); go();
}); });
} else { } else {
@ -226,7 +232,8 @@ export function create_out_transition(node: Element & ElementCSSInlineStyle, fn:
} }
export function create_bidirectional_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any, intro: boolean) { export function create_bidirectional_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any, intro: boolean) {
let config = fn(node, params); let config = fn(node, params, { direction: 'both' }) as TransitionConfig;
const generator = is_function(config) ? config : null;
let t = intro ? 0 : 1; let t = intro ? 0 : 1;
@ -334,10 +341,9 @@ export function create_bidirectional_transition(node: Element & ElementCSSInline
return { return {
run(b) { run(b) {
if (is_function(config)) { if (generator) {
wait().then(() => { wait().then(() => {
// @ts-ignore config = generator({ direction: b ? 'in' : 'out' });
config = config();
go(b); go(b);
}); });
} else { } else {

Loading…
Cancel
Save