Skip to content

Instantly share code, notes, and snippets.

@pygy
Created April 7, 2018 21:58
Show Gist options
  • Save pygy/5f626207f25ccac232141be79c14f40b to your computer and use it in GitHub Desktop.
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.
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