forked from alpinejs/alpine
-
Notifications
You must be signed in to change notification settings - Fork 0
/
morph.html
68 lines (59 loc) · 2.18 KB
/
morph.html
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
<html>
<script src="./packages/morph/dist/cdn.js" defer></script>
<script src="./packages/alpinejs/dist/cdn.js" defer></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script> -->
<div id="before">
<!-- Before markup goes here: -->
<ul>
<li data-key="1">foo<input></li>
</ul>
</div>
<div id="after" style="display: none;">
<!-- After markup goes here: -->
<ul>
<li data-key="2">bar<input></li>
<li data-key="3">baz<input></li>
<li data-key="1">foo<input></li>
</ul>
</div>
<div id="b"></div>
<div style="display: flex;">
<pre id="log-from"></pre>
<pre id="log-to"></pre>
<ul id="log-message"></ul>
</div>
<div style="position: absolute; bottom: 0; left: 0; padding: 1rem; width: 100vw; background: gray; box-sizing: border-box;">
<button onclick="start()">Start</button>
<button onclick="next()">Next Step</button>
</div>
<script>
function start() {
Alpine.morph.log((message, from, to) => {