Expand / Collapse Animation with Mithril v1.x

definition.js

var animateHeight = {
  oncreate: function (vnode) {
    var height = vnode.dom.clientHeight
    vnode.dom.style.maxHeight = 0
    vnode.dom.offsetHeight // Trick to recalc layout
    window.requestAnimationFrame( ()=>  (vnode.dom.style.maxHeight = height+1+"px") )
  },
  onbeforeremove: function (vnode, done) {
    vnode.dom.addEventListener('transitionend', done)
    vnode.dom.style.maxHeight = 0
  },
  style: {
    overflow: 'hidden',
    transition: 'max-height 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000)',
  }
}

example-use.js

//
// See it in action here: https://jsbin.com/juxixotake/1/edit?js,output
//
var flag = false;

var Example  = {
  view : function( component ){

    return m('.example-component', [
      flag
        ? m('div', animateHeight, sampleView())
        : m('p', "Click the toggle button.")
      ,
      m('button', { onclick: () => flag = !flag }, "Toggle")
    ]);
  }
};

m.mount( document.body, Example);