Created
April 7, 2018 21:58
-
-
Save pygy/5f626207f25ccac232141be79c14f40b to your computer and use it in GitHub Desktop.
For those times you want to add entrance animations in Mithril, and the adding a class/animation in `oncreate` doesn't cut it.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
fuction forceLayout(dom) { | |
dom.getBoundingClientRect().height | |
} | |
let prm | |
let nodes = [] | |
function debouncedLayout(dom) { | |
if (nodes.length === 0) { | |
prm = Promise.resolve(null).then(() => { | |
nodes.forEach(forceLayout) | |
nodes = [] | |
}) | |
} | |
nodes.push(dom) | |
return prm | |
} | |
const c = { | |
async oncreate(v) { | |
await syncLayout(v.dom) | |
v.dom.classList.add('show') | |
} | |
} | |
// usage: sync | |
const CMP = { | |
view() {return m(".foo")}, | |
oncreate({dom}) { | |
forceLayout(dom) | |
dom.classList.add('show') | |
} | |
} | |
// debounced | |
const CMP = { | |
view() {return m(".foo")}, | |
async oncreate({dom}) { | |
await debouncedLayout(dom) | |
dom.classList.add('show') | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment