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

Convert ./src/runtime/internal/transitions.ts to JavaScript

Browse Source
pull/8569/head
Simon Holthausen 3 years ago
parent 00912f2e01
commit ab50e6042e
1 changed files with 389 additions and 386 deletions
Show Stats Download Patch File Download Diff File

337
src/runtime/internal/transitions.ts
Unescape View File

@ -1,30 +1,16 @@
import { identity as linear, is_function, noop, run_all } from './utils';
import { identity as linear, is_function, noop, run_all } from './utils.js';
import { now } from './environment';
import { loop } from './loop';
import { create_rule, delete_rule } from './style_manager';
import { custom_event } from './dom';
import { add_render_callback } from './scheduler';
import { TransitionConfig } from '../transition';
import type { Fragment } from './public';
let promise: Promise<void> | null;
type INTRO = 1;
type OUTRO = 0;
interface Outro {
/**
* remaining outros
*/
r: number;
/**
* callbacks
*/
c: Function[];
/**
* parent outro
*/
p: Outro;
}
* @type {Promise<void> | null} */
let promise;
/**
* @returns {Promise<void>} */
function wait() {
if (!promise) {
promise = Promise.resolve();
@ -32,25 +18,36 @@ function wait() {
promise = null;
});
}
return promise;
}
function dispatch(node: Element, direction: INTRO | OUTRO | boolean, kind: 'start' | 'end') {
/**
* @param {Element} node
* @param {INTRO | OUTRO | boolean} direction
* @param {'start' | 'end'} kind
* @returns {void}
*/
function dispatch(node, direction, kind) {
node.dispatchEvent(custom_event(`${direction ? 'intro' : 'outro'}${kind}`));
}
const outroing = new Set();
let outros: Outro;
/**
* @type {Outro} */
let outros;
/**
* @returns {void} */
export function group_outros() {
outros = {
r: 0, // remaining outros
c: [], // callbacks
r: 0,
c: [],
p: outros // parent group
};
}
/**
* @returns {void} */
export function check_outros() {
if (!outros.r) {
run_all(outros.c);
@ -58,115 +55,119 @@ export function check_outros() {
outros = outros.p;
}
export function transition_in(block: Fragment, local?: 0 | 1) {
/**
* @param {Fragment} block
* @param {0 | 1} local
* @returns {void}
*/
export function transition_in(block, local) {
if (block && block.i) {
outroing.delete(block);
block.i(local);
}
}
export function transition_out(block: Fragment, local: 0 | 1, detach?: 0 | 1, callback?) {
/**
* @param {Fragment} block
* @param {0 | 1} local
* @param {0 | 1} detach
* @returns {void}
*/
export function transition_out(block, local, detach, callback) {
if (block && block.o) {
if (outroing.has(block)) return;
if (outroing.has(block))
return;
outroing.add(block);
outros.c.push(() => {
outroing.delete(block);
if (callback) {
if (detach) block.d(1);
if (detach)
block.d(1);
callback();
}
});
block.o(local);
} else if (callback) {
}
else if (callback) {
callback();
}
}
const null_transition: TransitionConfig = { duration: 0 };
/**
* @type {TransitionConfig} */
const null_transition = { duration: 0 };
type TransitionOptions = { direction: 'in' | 'out' | 'both' };
type TransitionFn = (node: Element, params: any, options: TransitionOptions) => TransitionConfig;
/**
* @param {Element & ElementCSSInlineStyle} node
* @param {TransitionFn} fn
* @param {any} params
* @returns {{ start(): void; invalidate(): void; end(): void; }}
*/
export function create_in_transition(node, fn, params) {
export function create_in_transition(
node: Element & ElementCSSInlineStyle,
fn: TransitionFn,
params: any
) {
const options: TransitionOptions = { direction: 'in' };
/**
* @type {TransitionOptions} */
const options = { direction: 'in' };
let config = fn(node, params, options);
let running = false;
let animation_name;
let task;
let uid = 0;
/**
* @returns {void} */
function cleanup() {
if (animation_name) delete_rule(node, animation_name);
if (animation_name)
delete_rule(node, animation_name);
}
/**
* @returns {void} */
function go() {
const {
delay = 0,
duration = 300,
easing = linear,
tick = noop,
css
} = config || null_transition;
if (css) animation_name = create_rule(node, 0, 1, duration, delay, easing, css, uid++);
const { delay = 0, duration = 300, easing = linear, tick = noop, css } = config || null_transition;
if (css)
animation_name = create_rule(node, 0, 1, duration, delay, easing, css, uid++);
tick(0, 1);
const start_time = now() + delay;
const end_time = start_time + duration;
if (task) task.abort();
if (task)
task.abort();
running = true;
add_render_callback(() => dispatch(node, true, 'start'));
task = loop((now) => {
if (running) {
if (now >= end_time) {
tick(1, 0);
dispatch(node, true, 'end');
cleanup();
return (running = false);
}
if (now >= start_time) {
const t = easing((now - start_time) / duration);
tick(t, 1 - t);
}
}
return running;
});
}
let started = false;
return {
start() {
if (started) return;
if (started)
return;
started = true;
delete_rule(node);
if (is_function(config)) {
config = config(options);
wait().then(go);
} else {
}
else {
go();
}
},
invalidate() {
started = false;
},
end() {
if (running) {
cleanup();
@ -176,127 +177,115 @@ export function create_in_transition(
};
}
export function create_out_transition(
node: Element & ElementCSSInlineStyle,
fn: TransitionFn,
params: any
) {
const options: TransitionOptions = { direction: 'out' };
/**
* @param {Element & ElementCSSInlineStyle} node
* @param {TransitionFn} fn
* @param {any} params
* @returns {{ end(reset: any): void; }}
*/
export function create_out_transition(node, fn, params) {
/**
* @type {TransitionOptions} */
const options = { direction: 'out' };
let config = fn(node, params, options);
let running = true;
let animation_name;
const group = outros;
group.r += 1;
/**
* @returns {void} */
function go() {
const {
delay = 0,
duration = 300,
easing = linear,
tick = noop,
css
} = config || null_transition;
if (css) animation_name = create_rule(node, 1, 0, duration, delay, easing, css);
const { delay = 0, duration = 300, easing = linear, tick = noop, css } = config || null_transition;
if (css)
animation_name = create_rule(node, 1, 0, duration, delay, easing, css);
const start_time = now() + delay;
const end_time = start_time + duration;
add_render_callback(() => dispatch(node, false, 'start'));
loop((now) => {
if (running) {
if (now >= end_time) {
tick(0, 1);
dispatch(node, false, 'end');
if (!--group.r) {
// this will result in `end()` being called,
// so we don't need to clean up here
run_all(group.c);
}
return false;
}
if (now >= start_time) {
const t = easing((now - start_time) / duration);
tick(1 - t, t);
}
}
return running;
});
}
if (is_function(config)) {
wait().then(() => {
// @ts-ignore
config = config(options);
go();
});
} else {
}
else {
go();
}
return {
end(reset) {
if (reset && config.tick) {
config.tick(1, 0);
}
if (running) {
if (animation_name) delete_rule(node, animation_name);
if (animation_name)
delete_rule(node, animation_name);
running = false;
}
}
};
}
interface PendingProgram {
start: number;
b: INTRO | OUTRO;
group?: Outro;
}
interface Program {
a: number;
b: INTRO | OUTRO;
/**
* direction
* @param {Element & ElementCSSInlineStyle} node
* @param {TransitionFn} fn
* @param {any} params
* @param {boolean} intro
* @returns {{ run(b: 0 | 1): void; end(): void; }}
*/
d: 1 | -1;
duration: number;
start: number;
end: number;
group?: Outro;
}
export function create_bidirectional_transition(node, fn, params, intro) {
export function create_bidirectional_transition(
node: Element & ElementCSSInlineStyle,
fn: TransitionFn,
params: any,
intro: boolean
) {
const options: TransitionOptions = { direction: 'both' };
/**
* @type {TransitionOptions} */
const options = { direction: 'both' };
let config = fn(node, params, options);
let t = intro ? 0 : 1;
let running_program: Program | null = null;
let pending_program: PendingProgram | null = null;
/**
* @type {Program | null} */
let running_program = null;
/**
* @type {PendingProgram | null} */
let pending_program = null;
let animation_name = null;
/**
* @returns {void} */
function clear_animation() {
if (animation_name) delete_rule(node, animation_name);
if (animation_name)
delete_rule(node, animation_name);
}
function init(program: PendingProgram, duration: number): Program {
const d = (program.b - t) as Program['d'];
/**
* @param {PendingProgram} program
* @param {number} duration
* @returns {Program}
*/
function init(program, duration) {
const d = (program.b - t);
duration *= Math.abs(d);
return {
a: t,
b: program.b,
@ -308,109 +297,123 @@ export function create_bidirectional_transition(
};
}
function go(b: INTRO | OUTRO) {
const {
delay = 0,
duration = 300,
easing = linear,
tick = noop,
css
} = config || null_transition;
/**
* @param {INTRO | OUTRO} b
* @returns {void}
*/
function go(b) {
const { delay = 0, duration = 300, easing = linear, tick = noop, css } = config || null_transition;
const program: PendingProgram = {
/**
* @type {PendingProgram} */
const program = {
start: now() + delay,
b
};
if (!b) {
// @ts-ignore todo: improve typings
program.group = outros;
outros.r += 1;
}
if (running_program || pending_program) {
pending_program = program;
} else {
}
else {
// if this is an intro, and there's a delay, we need to do
// an initial tick and/or apply CSS animation immediately
if (css) {
clear_animation();
animation_name = create_rule(node, t, b, duration, delay, easing, css);
}
if (b) tick(0, 1);
if (b)
tick(0, 1);
running_program = init(program, duration);
add_render_callback(() => dispatch(node, b, 'start'));
loop((now) => {
if (pending_program && now > pending_program.start) {
running_program = init(pending_program, duration);
pending_program = null;
dispatch(node, running_program.b, 'start');
if (css) {
clear_animation();
animation_name = create_rule(
node,
t,
running_program.b,
running_program.duration,
0,
easing,
config.css
);
animation_name = create_rule(node, t, running_program.b, running_program.duration, 0, easing, config.css);
}
}
if (running_program) {
if (now >= running_program.end) {
tick((t = running_program.b), 1 - t);
dispatch(node, running_program.b, 'end');
if (!pending_program) {
// we're done
if (running_program.b) {
// intro — we can tidy up immediately
clear_animation();
} else {
}
else {
// outro — needs to be coordinated
if (!--running_program.group.r) run_all(running_program.group.c);
if (!--running_program.group.r)
run_all(running_program.group.c);
}
}
running_program = null;
} else if (now >= running_program.start) {
}
else if (now >= running_program.start) {
const p = now - running_program.start;
t = running_program.a + running_program.d * easing(p / running_program.duration);
tick(t, 1 - t);
}
}
return !!(running_program || pending_program);
});
}
}
return {
run(b: INTRO | OUTRO) {
run(b) {
if (is_function(config)) {
wait().then(() => {
const opts: TransitionOptions = { direction: b ? 'in' : 'out' };
const opts = { direction: b ? 'in' : 'out' };
// @ts-ignore
config = config(opts);
go(b);
});
} else {
}
else {
go(b);
}
},
end() {
clear_animation();
running_program = pending_program = null;
}
};
}
/** @typedef {1} INTRO */
/** @typedef {0} OUTRO */
/** @typedef {{ direction: 'in' | 'out' | 'both' }} TransitionOptions */
/** @typedef {(node: Element, params: any, options: TransitionOptions) => TransitionConfig} TransitionFn */
/** @typedef {Object} Outro
* @property {number} r
* remaining outros
* @property {Function[]} c
* callbacks
* @property {Object} p
* parent outro
*/
/** @typedef {Object} PendingProgram
* @property {number} start
* @property {INTRO|OUTRO} b
* @property {Outro} [group]
*/
/** @typedef {Object} Program
* @property {number} a
* @property {INTRO|OUTRO} b
* @property {1|-1} d
* direction
* @property {number} duration
* @property {number} start
* @property {number} end
* @property {Outro} [group]
*/
Write Preview
Loading…
Cancel
Save