/
transition-events.ts
111 lines (101 loc) · 2.95 KB
/
transition-events.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
describe('Transition events', () => {
it('basic transitionrun', (done) => {
const container1 = document.createElement('div');
document.body.appendChild(container1);
container1.addEventListener('transitionrun', async () => {
done();
});
setElementStyle(container1, {
position: 'absolute',
top: 0,
left: 0,
padding: '20px',
backgroundColor: '#999',
transitionProperty: 'transform',
transitionDuration: '1s',
transitionTimingFunction: 'linear',
});
requestAnimationFrame(() => {
container1.style.transform = 'translate(10px, 10px)';
});
});
it('basic transitionstart', (done) => {
const container1 = document.createElement('div');
document.body.appendChild(container1);
container1.addEventListener('transitionstart', async () => {
done();
});
setElementStyle(container1, {
position: 'absolute',
top: 0,
left: 0,
padding: '20px',
backgroundColor: '#999',
transition: 'transform 1s linear',
});
requestAnimationFrame(async () => {
setElementStyle(container1, {
transform: 'translate(10px,20px)',
});
});
});
it('basic transitionend', (done) => {
const container1 = document.createElement('div');
document.body.appendChild(container1);
setElementStyle(container1, {
position: 'absolute',
top: 0,
left: 0,
padding: '20px',
backgroundColor: '#999',
transition: 'transform 1s linear',
});
container1.appendChild(document.createTextNode('DIV 1'));
container1.addEventListener('transitionend', async function self() {
container1.removeEventListener('transitionend', self);
await snapshot();
done();
});
requestAnimationFrame(async () => {
await sleep(0.1);
await snapshot();
setElementStyle(container1, {
transform: 'translate(10px,20px)',
});
});
});
it('mutiple transitionend', (done) => {
const container1 = document.createElement('div');
document.body.appendChild(container1);
setElementStyle(container1, {
position: 'absolute',
top: 0,
left: 0,
padding: '20px',
backgroundColor: '#999',
transition: 'transform 1s linear',
});
container1.appendChild(document.createTextNode('DIV 1'));
function first() {
container1.removeEventListener('transitionend', first);
sleep(0.1)
.then(() => {
container1.addEventListener('transitionend', second);
setElementStyle(container1, {
transform: 'translate(250px,250px)',
});
});
}
function second() {
container1.removeEventListener('transitionend', second);
snapshot().then(done);
}
container1.addEventListener('transitionend', first);
requestAnimationFrame(async () => {
await snapshot();
setElementStyle(container1, {
transform: 'translate(30px,30px)',
});
});
});
});