Skip to content

Commit dc657c0

Browse files
Rich-HarrisRich-Harris
committed
add integrated transitions
1 parent 8faa6a6 commit dc657c0

File tree

4 files changed

+263
-16
lines changed

4 files changed

+263
-16
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ node_modules
77
/index.js
88
/internal.*
99
/store.js
10+
/easing.js
11+
/transition.js
1012
/scratch/
1113
/coverage/
1214
/coverage.lcov/

‎easing.mjs

+173
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
/*
2+
Adapted from https://github.com/mattdesl
3+
Distributed under MIT License https://github.com/mattdesl/eases/blob/master/LICENSE.md
4+
*/
5+
6+
export function backInOut(t) {
7+
var s = 1.70158 * 1.525;
8+
if ((t *= 2) < 1) return 0.5 * (t * t * ((s + 1) * t - s));
9+
return 0.5 * ((t -= 2) * t * ((s + 1) * t + s) + 2);
10+
}
11+
12+
export function backIn(t) {
13+
var s = 1.70158;
14+
return t * t * ((s + 1) * t - s);
15+
}
16+
17+
export function backOut(t) {
18+
var s = 1.70158;
19+
return --t * t * ((s + 1) * t + s) + 1;
20+
}
21+
22+
export function bounceOut(t) {
23+
var a = 4.0 / 11.0;
24+
var b = 8.0 / 11.0;
25+
var c = 9.0 / 10.0;
26+
27+
var ca = 4356.0 / 361.0;
28+
var cb = 35442.0 / 1805.0;
29+
var cc = 16061.0 / 1805.0;
30+
31+
var t2 = t * t;
32+
33+
return t < a
34+
? 7.5625 * t2
35+
: t < b
36+
? 9.075 * t2 - 9.9 * t + 3.4
37+
: t < c
38+
? ca * t2 - cb * t + cc
39+
: 10.8 * t * t - 20.52 * t + 10.72;
40+
}
41+
42+
export function bounceInOut(t) {
43+
return t < 0.5
44+
? 0.5 * (1.0 - bounceOut(1.0 - t * 2.0))
45+
: 0.5 * bounceOut(t * 2.0 - 1.0) + 0.5;
46+
}
47+
48+
export function bounceIn(t) {
49+
return 1.0 - bounceOut(1.0 - t);
50+
}
51+
52+
export function circInOut(t) {
53+
if ((t *= 2) < 1) return -0.5 * (Math.sqrt(1 - t * t) - 1);
54+
return 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1);
55+
}
56+
57+
export function circIn(t) {
58+
return 1.0 - Math.sqrt(1.0 - t * t);
59+
}
60+
61+
export function circOut(t) {
62+
return Math.sqrt(1 - --t * t);
63+
}
64+
65+
export function cubicInOut(t) {
66+
return t < 0.5 ? 4.0 * t * t * t : 0.5 * Math.pow(2.0 * t - 2.0, 3.0) + 1.0;
67+
}
68+
69+
export function cubicIn(t) {
70+
return t * t * t;
71+
}
72+
73+
export function cubicOut(t) {
74+
var f = t - 1.0;
75+
return f * f * f + 1.0;
76+
}
77+
78+
export function elasticInOut(t) {
79+
return t < 0.5
80+
? 0.5 *
81+
Math.sin(((+13.0 * Math.PI) / 2) * 2.0 * t) *
82+
Math.pow(2.0, 10.0 * (2.0 * t - 1.0))
83+
: 0.5 *
84+
Math.sin(((-13.0 * Math.PI) / 2) * (2.0 * t - 1.0 + 1.0)) *
85+
Math.pow(2.0, -10.0 * (2.0 * t - 1.0)) +
86+
1.0;
87+
}
88+
89+
export function elasticIn(t) {
90+
return Math.sin((13.0 * t * Math.PI) / 2) * Math.pow(2.0, 10.0 * (t - 1.0));
91+
}
92+
93+
export function elasticOut(t) {
94+
return (
95+
Math.sin((-13.0 * (t + 1.0) * Math.PI) / 2) * Math.pow(2.0, -10.0 * t) + 1.0
96+
);
97+
}
98+
99+
export function expoInOut(t) {
100+
return t === 0.0 || t === 1.0
101+
? t
102+
: t < 0.5
103+
? +0.5 * Math.pow(2.0, 20.0 * t - 10.0)
104+
: -0.5 * Math.pow(2.0, 10.0 - t * 20.0) + 1.0;
105+
}
106+
107+
export function expoIn(t) {
108+
return t === 0.0 ? t : Math.pow(2.0, 10.0 * (t - 1.0));
109+
}
110+
111+
export function expoOut(t) {
112+
return t === 1.0 ? t : 1.0 - Math.pow(2.0, -10.0 * t);
113+
}
114+
115+
export function linear(t) {
116+
return t;
117+
}
118+
119+
export function quadInOut(t) {
120+
t /= 0.5;
121+
if (t < 1) return 0.5 * t * t;
122+
t--;
123+
return -0.5 * (t * (t - 2) - 1);
124+
}
125+
126+
export function quadIn(t) {
127+
return t * t;
128+
}
129+
130+
export function quadOut(t) {
131+
return -t * (t - 2.0);
132+
}
133+
134+
export function quarticInOut(t) {
135+
return t < 0.5
136+
? +8.0 * Math.pow(t, 4.0)
137+
: -8.0 * Math.pow(t - 1.0, 4.0) + 1.0;
138+
}
139+
140+
export function quarticIn(t) {
141+
return Math.pow(t, 4.0);
142+
}
143+
144+
export function quarticOut(t) {
145+
return Math.pow(t - 1.0, 3.0) * (1.0 - t) + 1.0;
146+
}
147+
148+
export function qinticInOut(t) {
149+
if ((t *= 2) < 1) return 0.5 * t * t * t * t * t;
150+
return 0.5 * ((t -= 2) * t * t * t * t + 2);
151+
}
152+
153+
export function qinticIn(t) {
154+
return t * t * t * t * t;
155+
}
156+
157+
export function qinticOut(t) {
158+
return --t * t * t * t * t + 1;
159+
}
160+
161+
export function sineInOut(t) {
162+
return -0.5 * (Math.cos(Math.PI * t) - 1);
163+
}
164+
165+
export function sineIn(t) {
166+
var v = Math.cos(t * Math.PI * 0.5);
167+
if (Math.abs(v) < 1e-14) return 1;
168+
else return 1 - v;
169+
}
170+
171+
export function sineOut(t) {
172+
return Math.sin((t * Math.PI) / 2);
173+
}

‎rollup.config.js

+6-16
Original file line numberDiff line numberDiff line change
@@ -52,16 +52,6 @@ export default [
5252
experimentalCodeSplitting: true
5353
},
5454

55-
/* index.js */
56-
{
57-
input: 'index.mjs',
58-
output: {
59-
file: 'index.js',
60-
format: 'cjs'
61-
},
62-
external: name => name !== 'index.mjs'
63-
},
64-
6555
/* internal.[m]js */
6656
{
6757
input: 'src/internal/index.js',
@@ -77,13 +67,13 @@ export default [
7767
]
7868
},
7969

80-
/* store.js */
81-
{
82-
input: 'store.mjs',
70+
// runtime API
71+
...['index', 'store', 'easing', 'transition'].map(name => ({
72+
input: `${name}.mjs`,
8373
output: {
84-
file: 'store.js',
74+
file: `${name}.js`,
8575
format: 'cjs'
8676
},
87-
external: name => name !== 'store.mjs'
88-
},
77+
external: id => id !== `${name}.mjs`
78+
}))
8979
];

‎transition.mjs

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { cubicOut, cubicInOut } from './easing';
2+
3+
export function fade(node, {
4+
delay = 0,
5+
duration = 400
6+
}) {
7+
const o = +getComputedStyle(node).opacity;
8+
9+
return {
10+
delay,
11+
duration,
12+
css: t => `opacity: ${t * o}`
13+
};
14+
}
15+
16+
export function fly(node, {
17+
delay = 0,
18+
duration = 400,
19+
easing = cubicOut,
20+
x = 0,
21+
y = 0
22+
}) {
23+
const style = getComputedStyle(node);
24+
const opacity = +style.opacity;
25+
const transform = style.transform === 'none' ? '' : style.transform;
26+
27+
return {
28+
delay,
29+
duration,
30+
easing,
31+
css: t => `
32+
transform: ${transform} translate(${(1 - t) * x}px, ${(1 - t) * y}px);
33+
opacity: ${t * opacity}`
34+
};
35+
}
36+
37+
export function slide(node, {
38+
delay = 0,
39+
duration = 400,
40+
easing = cubicOut
41+
}) {
42+
const style = getComputedStyle(node);
43+
const opacity = +style.opacity;
44+
const height = parseFloat(style.height);
45+
const padding_top = parseFloat(style.paddingTop);
46+
const padding_bottom = parseFloat(style.paddingBottom);
47+
const margin_top = parseFloat(style.marginTop);
48+
const margin_bottom = parseFloat(style.marginBottom);
49+
const border_top_width = parseFloat(style.borderTopWidth);
50+
const border_bottom_width = parseFloat(style.borderBottomWidth);
51+
52+
return {
53+
delay,
54+
duration,
55+
easing,
56+
css: t =>
57+
`overflow: hidden;` +
58+
`opacity: ${Math.min(t * 20, 1) * opacity};` +
59+
`height: ${t * height}px;` +
60+
`padding-top: ${t * padding_top}px;` +
61+
`padding-bottom: ${t * padding_bottom}px;` +
62+
`margin-top: ${t * margin_top}px;` +
63+
`margin-bottom: ${t * margin_bottom}px;` +
64+
`border-top-width: ${t * border_top_width}px;` +
65+
`border-bottom-width: ${t * border_bottom_width}px;`
66+
};
67+
}
68+
69+
export function draw(node, {
70+
delay = 0,
71+
duration = 800,
72+
easing = cubicInOut
73+
}) {
74+
const len = node.getTotalLength();
75+
76+
return {
77+
delay,
78+
duration,
79+
easing,
80+
css: (t, u) => `stroke-dasharray: ${t * len} ${u * len}`
81+
};
82+
}

0 commit comments

Comments
 (0)