|
|
|
@ -79,23 +79,15 @@ export function animation() {
|
|
|
|
* @returns {void}
|
|
|
|
* @returns {void}
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
export function transition(flags, element, get_fn, get_params) {
|
|
|
|
export function transition(flags, element, get_fn, get_params) {
|
|
|
|
const effect = /** @type {import('#client').Effect} */ (current_effect);
|
|
|
|
var is_intro = (flags & TRANSITION_IN) !== 0;
|
|
|
|
|
|
|
|
var is_outro = (flags & TRANSITION_OUT) !== 0;
|
|
|
|
|
|
|
|
var is_global = (flags & TRANSITION_GLOBAL) !== 0;
|
|
|
|
|
|
|
|
|
|
|
|
const is_intro = (flags & TRANSITION_IN) !== 0;
|
|
|
|
/** @type {'in' | 'out' | 'both'} */
|
|
|
|
const is_outro = (flags & TRANSITION_OUT) !== 0;
|
|
|
|
var direction = is_intro && is_outro ? 'both' : is_intro ? 'in' : 'out';
|
|
|
|
const is_global = (flags & TRANSITION_GLOBAL) !== 0;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const direction = is_intro && is_outro ? 'both' : is_intro ? 'in' : 'out';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** @type {import('#client').TransitionPayload | ((opts: { direction: 'in' | 'out' }) => import('#client').TransitionPayload) | undefined} */
|
|
|
|
/** @type {import('#client').TransitionPayload | ((opts: { direction: 'in' | 'out' }) => import('#client').TransitionPayload) | undefined} */
|
|
|
|
let current_options;
|
|
|
|
var current_options;
|
|
|
|
|
|
|
|
|
|
|
|
/** @type {(() => void) | undefined} */
|
|
|
|
|
|
|
|
let callback;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function get_options() {
|
|
|
|
|
|
|
|
return (current_options ??= get_fn()(element, get_params?.(), { direction }));
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var inert = element.inert;
|
|
|
|
var inert = element.inert;
|
|
|
|
|
|
|
|
|
|
|
|
@ -108,30 +100,27 @@ export function transition(flags, element, get_fn, get_params) {
|
|
|
|
/** @type {(() => void) | undefined} */
|
|
|
|
/** @type {(() => void) | undefined} */
|
|
|
|
var reset;
|
|
|
|
var reset;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function get_options() {
|
|
|
|
|
|
|
|
return (current_options ??= get_fn()(element, get_params?.(), { direction }));
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/** @type {import('#client').Transition} */
|
|
|
|
/** @type {import('#client').Transition} */
|
|
|
|
const transition = {
|
|
|
|
var transition = {
|
|
|
|
is_global,
|
|
|
|
is_global,
|
|
|
|
async in() {
|
|
|
|
async in() {
|
|
|
|
callback = undefined;
|
|
|
|
|
|
|
|
element.inert = inert;
|
|
|
|
element.inert = inert;
|
|
|
|
|
|
|
|
|
|
|
|
if (is_intro) {
|
|
|
|
if (is_intro) {
|
|
|
|
intro = animate(element, get_options(), outro, 1, () => {
|
|
|
|
intro = animate(element, get_options(), outro, 1, () => {
|
|
|
|
intro = current_options = undefined;
|
|
|
|
intro = current_options = undefined;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
outro?.neuter();
|
|
|
|
|
|
|
|
reset = intro.reset; // TODO handle this inside `animate`
|
|
|
|
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
outro?.abort();
|
|
|
|
outro?.abort();
|
|
|
|
reset?.();
|
|
|
|
reset?.();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
reset = undefined;
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
async out(fn) {
|
|
|
|
async out(fn) {
|
|
|
|
if (is_outro) {
|
|
|
|
if (is_outro) {
|
|
|
|
callback = fn;
|
|
|
|
|
|
|
|
element.inert = true;
|
|
|
|
element.inert = true;
|
|
|
|
|
|
|
|
|
|
|
|
outro = animate(element, get_options(), intro, 0, () => {
|
|
|
|
outro = animate(element, get_options(), intro, 0, () => {
|
|
|
|
@ -140,8 +129,6 @@ export function transition(flags, element, get_fn, get_params) {
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
reset = outro.reset;
|
|
|
|
reset = outro.reset;
|
|
|
|
|
|
|
|
|
|
|
|
intro?.neuter();
|
|
|
|
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
fn?.();
|
|
|
|
fn?.();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -152,6 +139,8 @@ export function transition(flags, element, get_fn, get_params) {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var effect = /** @type {import('#client').Effect} */ (current_effect);
|
|
|
|
|
|
|
|
|
|
|
|
(effect.transitions ??= []).push(transition);
|
|
|
|
(effect.transitions ??= []).push(transition);
|
|
|
|
|
|
|
|
|
|
|
|
// if this is a local transition, we only want to run it if the parent (block) effect's
|
|
|
|
// if this is a local transition, we only want to run it if the parent (block) effect's
|
|
|
|
@ -177,8 +166,6 @@ export function transition(flags, element, get_fn, get_params) {
|
|
|
|
* @returns {import('#client').Animation}
|
|
|
|
* @returns {import('#client').Animation}
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
function animate(element, options, counterpart, target, callback) {
|
|
|
|
function animate(element, options, counterpart, target, callback) {
|
|
|
|
dispatch_event(element, target === 1 ? 'introstart' : 'outrostart');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (is_function(options)) {
|
|
|
|
if (is_function(options)) {
|
|
|
|
/** @type {import('#client').Animation} */
|
|
|
|
/** @type {import('#client').Animation} */
|
|
|
|
var a;
|
|
|
|
var a;
|
|
|
|
@ -196,6 +183,10 @@ function animate(element, options, counterpart, target, callback) {
|
|
|
|
};
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
dispatch_event(element, target === 1 ? 'introstart' : 'outrostart');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
counterpart?.neuter();
|
|
|
|
|
|
|
|
|
|
|
|
if (!options?.duration) {
|
|
|
|
if (!options?.duration) {
|
|
|
|
callback?.();
|
|
|
|
callback?.();
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
|