vndb/mithril-vndb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

initial commit (work in progress)

Browse source
This commit is contained in:
Leo Horie 2016-04-20 20:02:37 -04:00
parent 13fdb60f66
commit 559369016d
83 changed files with 10461 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
examples/animation/flowers.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 59 KiB

67
examples/animation/mosaic.html Normal file
View file

@ -0,0 +1,67 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mosaic</title>
<style>
#root {margin:auto;max-width:600px;width:100%;}
.slice {animation:enter 1s;animation-fill-mode:forwards;background-image:url(flowers.jpg);height:60px;float:left;opacity:0;width:60px;}
.slice:nth-child(10n) {clear:right;}
.exit {animation:exit 1s;}
@keyframes enter {
from {opacity:0;transform:rotate(-90deg) scale(0);}
to {opacity:1;transform:rotate(0) scale(1);}
}
@keyframes exit {
from {opacity:1;transform:rotate(0) scale(1);}
to {opacity:0;transform:rotate(90deg) scale(0);}
}
</style>
</head>
<body>
<div id="root"></div>
<script src="../../module/module.js"></script>
<script src="../../render/normalizeChildren.js"></script>
<script src="../../render/hyperscript.js"></script>
<script src="../../render/render.js"></script>
<script>
var m = require("../../render/hyperscript")
var render = require("../../render/render")(window, run).render
var root = document.getElementById("root")
var empty = []
var full = []
for (var i = 0; i < 100; i++) full.push(i)
var cells
function view() {
return m(".container", cells.map(function(i) {
return m(".slice", {
style: {backgroundPosition: (i % 10 * 11) + "% " + (Math.floor(i / 10) * 11) + "%"},
onbeforeremove: exit
})
}))
}
function exit(vnode, done) {
vnode.dom.classList.add("exit")
setTimeout(function() {
vnode.dom.classList.remove("exit")
done()
}, 1000)
}
function run() {
cells = cells === full ? empty : full
render(root, [view()])
setTimeout(run, 2000)
}
run()
</script>
</body>
</html>