1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, '__esModule', { value: true });
|
4 |
|
5 | var easing = require('../easing');
|
6 | var internal = require('../internal');
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 | function __rest(s, e) {
|
24 | var t = {};
|
25 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
26 | t[p] = s[p];
|
27 | if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
28 | for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
29 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
30 | t[p[i]] = s[p[i]];
|
31 | }
|
32 | return t;
|
33 | }
|
34 |
|
35 | function blur(node, { delay = 0, duration = 400, easing: easing$1 = easing.cubicInOut, amount = 5, opacity = 0 }) {
|
36 | const style = getComputedStyle(node);
|
37 | const target_opacity = +style.opacity;
|
38 | const f = style.filter === 'none' ? '' : style.filter;
|
39 | const od = target_opacity * (1 - opacity);
|
40 | return {
|
41 | delay,
|
42 | duration,
|
43 | easing: easing$1,
|
44 | css: (_t, u) => `opacity: ${target_opacity - (od * u)}; filter: ${f} blur(${u * amount}px);`
|
45 | };
|
46 | }
|
47 | function fade(node, { delay = 0, duration = 400, easing: easing$1 = easing.linear }) {
|
48 | const o = +getComputedStyle(node).opacity;
|
49 | return {
|
50 | delay,
|
51 | duration,
|
52 | easing: easing$1,
|
53 | css: t => `opacity: ${t * o}`
|
54 | };
|
55 | }
|
56 | function fly(node, { delay = 0, duration = 400, easing: easing$1 = easing.cubicOut, x = 0, y = 0, opacity = 0 }) {
|
57 | const style = getComputedStyle(node);
|
58 | const target_opacity = +style.opacity;
|
59 | const transform = style.transform === 'none' ? '' : style.transform;
|
60 | const od = target_opacity * (1 - opacity);
|
61 | return {
|
62 | delay,
|
63 | duration,
|
64 | easing: easing$1,
|
65 | css: (t, u) => `
|
66 | transform: ${transform} translate(${(1 - t) * x}px, ${(1 - t) * y}px);
|
67 | opacity: ${target_opacity - (od * u)}`
|
68 | };
|
69 | }
|
70 | function slide(node, { delay = 0, duration = 400, easing: easing$1 = easing.cubicOut }) {
|
71 | const style = getComputedStyle(node);
|
72 | const opacity = +style.opacity;
|
73 | const height = parseFloat(style.height);
|
74 | const padding_top = parseFloat(style.paddingTop);
|
75 | const padding_bottom = parseFloat(style.paddingBottom);
|
76 | const margin_top = parseFloat(style.marginTop);
|
77 | const margin_bottom = parseFloat(style.marginBottom);
|
78 | const border_top_width = parseFloat(style.borderTopWidth);
|
79 | const border_bottom_width = parseFloat(style.borderBottomWidth);
|
80 | return {
|
81 | delay,
|
82 | duration,
|
83 | easing: easing$1,
|
84 | css: t => `overflow: hidden;` +
|
85 | `opacity: ${Math.min(t * 20, 1) * opacity};` +
|
86 | `height: ${t * height}px;` +
|
87 | `padding-top: ${t * padding_top}px;` +
|
88 | `padding-bottom: ${t * padding_bottom}px;` +
|
89 | `margin-top: ${t * margin_top}px;` +
|
90 | `margin-bottom: ${t * margin_bottom}px;` +
|
91 | `border-top-width: ${t * border_top_width}px;` +
|
92 | `border-bottom-width: ${t * border_bottom_width}px;`
|
93 | };
|
94 | }
|
95 | function scale(node, { delay = 0, duration = 400, easing: easing$1 = easing.cubicOut, start = 0, opacity = 0 }) {
|
96 | const style = getComputedStyle(node);
|
97 | const target_opacity = +style.opacity;
|
98 | const transform = style.transform === 'none' ? '' : style.transform;
|
99 | const sd = 1 - start;
|
100 | const od = target_opacity * (1 - opacity);
|
101 | return {
|
102 | delay,
|
103 | duration,
|
104 | easing: easing$1,
|
105 | css: (_t, u) => `
|
106 | transform: ${transform} scale(${1 - (sd * u)});
|
107 | opacity: ${target_opacity - (od * u)}
|
108 | `
|
109 | };
|
110 | }
|
111 | function draw(node, { delay = 0, speed, duration, easing: easing$1 = easing.cubicInOut }) {
|
112 | const len = node.getTotalLength();
|
113 | if (duration === undefined) {
|
114 | if (speed === undefined) {
|
115 | duration = 800;
|
116 | }
|
117 | else {
|
118 | duration = len / speed;
|
119 | }
|
120 | }
|
121 | else if (typeof duration === 'function') {
|
122 | duration = duration(len);
|
123 | }
|
124 | return {
|
125 | delay,
|
126 | duration,
|
127 | easing: easing$1,
|
128 | css: (t, u) => `stroke-dasharray: ${t * len} ${u * len}`
|
129 | };
|
130 | }
|
131 | function crossfade(_a) {
|
132 | var { fallback } = _a, defaults = __rest(_a, ["fallback"]);
|
133 | const to_receive = new Map();
|
134 | const to_send = new Map();
|
135 | function crossfade(from, node, params) {
|
136 | const { delay = 0, duration = d => Math.sqrt(d) * 30, easing: easing$1 = easing.cubicOut } = internal.assign(internal.assign({}, defaults), params);
|
137 | const to = node.getBoundingClientRect();
|
138 | const dx = from.left - to.left;
|
139 | const dy = from.top - to.top;
|
140 | const dw = from.width / to.width;
|
141 | const dh = from.height / to.height;
|
142 | const d = Math.sqrt(dx * dx + dy * dy);
|
143 | const style = getComputedStyle(node);
|
144 | const transform = style.transform === 'none' ? '' : style.transform;
|
145 | const opacity = +style.opacity;
|
146 | return {
|
147 | delay,
|
148 | duration: internal.is_function(duration) ? duration(d) : duration,
|
149 | easing: easing$1,
|
150 | css: (t, u) => `
|
151 | opacity: ${t * opacity};
|
152 | transform-origin: top left;
|
153 | transform: ${transform} translate(${u * dx}px,${u * dy}px) scale(${t + (1 - t) * dw}, ${t + (1 - t) * dh});
|
154 | `
|
155 | };
|
156 | }
|
157 | function transition(items, counterparts, intro) {
|
158 | return (node, params) => {
|
159 | items.set(params.key, {
|
160 | rect: node.getBoundingClientRect()
|
161 | });
|
162 | return () => {
|
163 | if (counterparts.has(params.key)) {
|
164 | const { rect } = counterparts.get(params.key);
|
165 | counterparts.delete(params.key);
|
166 | return crossfade(rect, node, params);
|
167 | }
|
168 |
|
169 |
|
170 |
|
171 | items.delete(params.key);
|
172 | return fallback && fallback(node, params, intro);
|
173 | };
|
174 | };
|
175 | }
|
176 | return [
|
177 | transition(to_send, to_receive, false),
|
178 | transition(to_receive, to_send, true)
|
179 | ];
|
180 | }
|
181 |
|
182 | exports.blur = blur;
|
183 | exports.crossfade = crossfade;
|
184 | exports.draw = draw;
|
185 | exports.fade = fade;
|
186 | exports.fly = fly;
|
187 | exports.scale = scale;
|
188 | exports.slide = slide;
|