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