| 1 | import { cubicOut } from '../easing';
|
| 2 | import { is_function } from '../internal';
|
| 3 |
|
| 4 | function flip(node, animation, params) {
|
| 5 | const style = getComputedStyle(node);
|
| 6 | const transform = style.transform === 'none' ? '' : style.transform;
|
| 7 | const scaleX = animation.from.width / node.clientWidth;
|
| 8 | const scaleY = animation.from.height / node.clientHeight;
|
| 9 | const dx = (animation.from.left - animation.to.left) / scaleX;
|
| 10 | const dy = (animation.from.top - animation.to.top) / scaleY;
|
| 11 | const d = Math.sqrt(dx * dx + dy * dy);
|
| 12 | const { delay = 0, duration = (d) => Math.sqrt(d) * 120, easing = cubicOut } = params;
|
| 13 | return {
|
| 14 | delay,
|
| 15 | duration: is_function(duration) ? duration(d) : duration,
|
| 16 | easing,
|
| 17 | css: (_t, u) => `transform: ${transform} translate(${u * dx}px, ${u * dy}px);`
|
| 18 | };
|
| 19 | }
|
| 20 |
|
| 21 | export { flip };
|