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

Lint and format ./src/runtime/internal/transitions.js

Browse Source
pull/8569/head
Simon Holthausen 3 years ago
parent 535e586d10
commit 155a438aa0
1 changed files with 304 additions and 300 deletions
Show Stats Download Patch File Download Diff File

94
src/runtime/internal/transitions.js
Unescape View File

@ -75,20 +75,17 @@ export function transition_in(block, local) {
*/ */
export function transition_out(block, local, detach, callback) { export function transition_out(block, local, detach, callback) {
if (block && block.o) { if (block && block.o) {
if (outroing.has(block)) if (outroing.has(block)) return;
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) if (detach) block.d(1);
block.d(1);
callback(); callback();
} }
}); });
block.o(local); block.o(local);
} } else if (callback) {
else if (callback) {
callback(); callback();
} }
} }
@ -104,7 +101,6 @@ const null_transition = { duration: 0 };
* @returns {{ start(): void; invalidate(): void; end(): void; }} * @returns {{ start(): void; invalidate(): void; end(): void; }}
*/ */
export function create_in_transition(node, fn, params) { export function create_in_transition(node, fn, params) {
/** /**
* @type {TransitionOptions} */ * @type {TransitionOptions} */
const options = { direction: 'in' }; const options = { direction: 'in' };
@ -117,21 +113,24 @@ export function create_in_transition(node, fn, params) {
/** /**
* @returns {void} */ * @returns {void} */
function cleanup() { function cleanup() {
if (animation_name) if (animation_name) delete_rule(node, animation_name);
delete_rule(node, animation_name);
} }
/** /**
* @returns {void} */ * @returns {void} */
function go() { function go() {
const { delay = 0, duration = 300, easing = linear, tick = noop, css } = config || null_transition; const {
if (css) delay = 0,
animation_name = create_rule(node, 0, 1, duration, delay, easing, css, uid++); 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); 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) => {
@ -153,15 +152,13 @@ export function create_in_transition(node, fn, params) {
let started = false; let started = false;
return { return {
start() { start() {
if (started) if (started) return;
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();
} }
}, },
@ -184,7 +181,6 @@ export function create_in_transition(node, fn, params) {
* @returns {{ end(reset: any): void; }} * @returns {{ end(reset: any): void; }}
*/ */
export function create_out_transition(node, fn, params) { export function create_out_transition(node, fn, params) {
/** /**
* @type {TransitionOptions} */ * @type {TransitionOptions} */
const options = { direction: 'out' }; const options = { direction: 'out' };
@ -197,9 +193,14 @@ export function create_out_transition(node, fn, params) {
/** /**
* @returns {void} */ * @returns {void} */
function go() { function go() {
const { delay = 0, duration = 300, easing = linear, tick = noop, css } = config || null_transition; const {
if (css) delay = 0,
animation_name = create_rule(node, 1, 0, duration, delay, easing, css); 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 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'));
@ -229,8 +230,7 @@ export function create_out_transition(node, fn, params) {
config = config(options); config = config(options);
go(); go();
}); });
} } else {
else {
go(); go();
} }
return { return {
@ -239,8 +239,7 @@ export function create_out_transition(node, fn, params) {
config.tick(1, 0); config.tick(1, 0);
} }
if (running) { if (running) {
if (animation_name) if (animation_name) delete_rule(node, animation_name);
delete_rule(node, animation_name);
running = false; running = false;
} }
} }
@ -255,7 +254,6 @@ export function create_out_transition(node, fn, params) {
* @returns {{ run(b: 0 | 1): void; end(): void; }} * @returns {{ run(b: 0 | 1): void; end(): void; }}
*/ */
export function create_bidirectional_transition(node, fn, params, intro) { export function create_bidirectional_transition(node, fn, params, intro) {
/** /**
* @type {TransitionOptions} */ * @type {TransitionOptions} */
const options = { direction: 'both' }; const options = { direction: 'both' };
@ -274,8 +272,7 @@ export function create_bidirectional_transition(node, fn, params, intro) {
/** /**
* @returns {void} */ * @returns {void} */
function clear_animation() { function clear_animation() {
if (animation_name) if (animation_name) delete_rule(node, animation_name);
delete_rule(node, animation_name);
} }
/** /**
@ -284,7 +281,7 @@ export function create_bidirectional_transition(node, fn, params, intro) {
* @returns {Program} * @returns {Program}
*/ */
function init(program, duration) { function init(program, duration) {
const d = (program.b - t); const d = program.b - t;
duration *= Math.abs(d); duration *= Math.abs(d);
return { return {
a: t, a: t,
@ -302,7 +299,13 @@ export function create_bidirectional_transition(node, fn, params, intro) {
* @returns {void} * @returns {void}
*/ */
function go(b) { function go(b) {
const { delay = 0, duration = 300, easing = linear, tick = noop, css } = config || null_transition; const {
delay = 0,
duration = 300,
easing = linear,
tick = noop,
css
} = config || null_transition;
/** /**
* @type {PendingProgram} */ * @type {PendingProgram} */
@ -317,16 +320,14 @@ export function create_bidirectional_transition(node, fn, params, intro) {
} }
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) => {
@ -336,7 +337,15 @@ export function create_bidirectional_transition(node, fn, params, intro) {
dispatch(node, running_program.b, 'start'); dispatch(node, running_program.b, 'start');
if (css) { if (css) {
clear_animation(); 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 (running_program) {
@ -348,16 +357,13 @@ export function create_bidirectional_transition(node, fn, params, intro) {
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) if (!--running_program.group.r) run_all(running_program.group.c);
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);
@ -376,8 +382,7 @@ export function create_bidirectional_transition(node, fn, params, intro) {
config = config(opts); config = config(opts);
go(b); go(b);
}); });
} } else {
else {
go(b); go(b);
} }
}, },
@ -388,7 +393,6 @@ export function create_bidirectional_transition(node, fn, params, intro) {
}; };
} }
/** @typedef {1} INTRO */ /** @typedef {1} INTRO */
/** @typedef {0} OUTRO */ /** @typedef {0} OUTRO */
/** @typedef {{ direction: 'in' | 'out' | 'both' }} TransitionOptions */ /** @typedef {{ direction: 'in' | 'out' | 'both' }} TransitionOptions */

Write Preview
Loading…
Cancel
Save