|
|
|
|
@ -1,26 +1,34 @@
|
|
|
|
|
import { identity as linear, noop } from './utils';
|
|
|
|
|
import { now } from './environment';
|
|
|
|
|
import { loop } from './loop';
|
|
|
|
|
import { create_rule, delete_rule } from './style_manager';
|
|
|
|
|
import { identity as linear, noop } from './utils.js';
|
|
|
|
|
import { now } from './environment.js';
|
|
|
|
|
import { loop } from './loop.js';
|
|
|
|
|
import { create_rule, delete_rule } from './style_manager.js';
|
|
|
|
|
|
|
|
|
|
/** @param {Element & ElementCSSInlineStyle} node
|
|
|
|
|
* @param {PositionRect} from
|
|
|
|
|
* @param {AnimationFn} fn
|
|
|
|
|
* @returns {any}
|
|
|
|
|
*/
|
|
|
|
|
export function create_animation(node, from, fn, params) {
|
|
|
|
|
if (!from)
|
|
|
|
|
return noop;
|
|
|
|
|
if (!from) return noop;
|
|
|
|
|
const to = node.getBoundingClientRect();
|
|
|
|
|
if (from.left === to.left &&
|
|
|
|
|
if (
|
|
|
|
|
from.left === to.left &&
|
|
|
|
|
from.right === to.right &&
|
|
|
|
|
from.top === to.top &&
|
|
|
|
|
from.bottom === to.bottom)
|
|
|
|
|
from.bottom === to.bottom
|
|
|
|
|
)
|
|
|
|
|
return noop;
|
|
|
|
|
const { delay = 0, duration = 300, easing = linear,
|
|
|
|
|
const {
|
|
|
|
|
delay = 0,
|
|
|
|
|
duration = 300,
|
|
|
|
|
easing = linear,
|
|
|
|
|
// @ts-ignore todo: should this be separated from destructuring? Or start/end added to public api and documentation?
|
|
|
|
|
start: start_time = now() + delay,
|
|
|
|
|
// @ts-ignore todo:
|
|
|
|
|
end = start_time + duration, tick = noop, css } = fn(node, { from, to }, params);
|
|
|
|
|
end = start_time + duration,
|
|
|
|
|
tick = noop,
|
|
|
|
|
css
|
|
|
|
|
} = fn(node, { from, to }, params);
|
|
|
|
|
let running = true;
|
|
|
|
|
let started = false;
|
|
|
|
|
let name;
|
|
|
|
|
@ -35,8 +43,7 @@ export function create_animation(node, from, fn, params) {
|
|
|
|
|
}
|
|
|
|
|
/** @returns {void} */
|
|
|
|
|
function stop() {
|
|
|
|
|
if (css)
|
|
|
|
|
delete_rule(node, name);
|
|
|
|
|
if (css) delete_rule(node, name);
|
|
|
|
|
running = false;
|
|
|
|
|
}
|
|
|
|
|
loop((now) => {
|
|
|
|
|
@ -61,6 +68,7 @@ export function create_animation(node, from, fn, params) {
|
|
|
|
|
tick(0, 1);
|
|
|
|
|
return stop;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** @param {Element & ElementCSSInlineStyle} node
|
|
|
|
|
* @returns {void}
|
|
|
|
|
*/
|
|
|
|
|
@ -75,6 +83,7 @@ export function fix_position(node) {
|
|
|
|
|
add_transform(node, a);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** @param {Element & ElementCSSInlineStyle} node
|
|
|
|
|
* @param {PositionRect} a
|
|
|
|
|
* @returns {void}
|
|
|
|
|
@ -88,7 +97,6 @@ export function add_transform(node, a) {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** @typedef {DOMRect | ClientRect} PositionRect */
|
|
|
|
|
/**
|
|
|
|
|
* @typedef {(
|
|
|
|
|
@ -97,4 +105,3 @@ export function add_transform(node, a) {
|
|
|
|
|
* params: any
|
|
|
|
|
* ) => AnimationConfig} AnimationFn
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
|