Enter & exit animations for Mithril components

Demo of component exit animations in Mithril using https://github.com/barneycarroll/mithril.exitable.js/

by Barney Carroll

HTML

<script src="https://cdn.rawgit.com/julianshapiro/velocity/master/velocity.min.js"></script>
<script src="https://cdn.rawgit.com/barneycarroll/mithril.exitable.js/master/src/exitable.es3.js"></script>

CSS

body, button {
  font: 1em/1.5 sans-serif;
}

Babel + JSX

// Two exitable components, with different exit animations
const block = {
  border  : '1px solid',
  margin  : '1em',
  padding : '1em'
}

const components = [
	{
  	controller(){
    	this.style = {
      	...block,
      	display : 'none'
      }
      
      this.entry = el =>
      	Velocity( el, 'fadeIn' )
        	.then( () => 
          	this.style.display = 'block'
          )
      
    	this.exit = el =>
      	Velocity( el, 'fadeOut' )
    },
    
    view : ( { style, entry } ) => 
      m( 'div', {
    		style,
      	config( el, init ){
        	if( !init )
          	entry( el )
        }
      }, 'Fading!' )
  },
  
	{
  	controller(){
    	this.style = {
      	...block,
      	display : 'none'
      }
      
      this.entry = el =>
      	Velocity( el, 'slideDown' )
        	.then( () => 
          	this.style.display = 'block'
          )
      
    	this.exit = el =>
      	Velocity( el, 'slideUp' )
    },
    
    view : ( { style, entry } ) => 
      m( 'div', {
    		style,
      	config( el, init ){
        	if( !init )
          	entry( el )
        }
      }, 'Sliding!' )
  }
]

m.mount( document.body, {
	view : ctrl =>
  	m( 'div', 
    
    	m( 'button', { onclick(){
      	ctrl.toggle = !ctrl.toggle
      } }, 'Switch components' ),
      
      components[ ~~ctrl.toggle ],
      
      m( 'p',
      	`The effect above is uninspiring in and of itself, but it demonstrates a pretty powerful feature for virtual DOM patching: using `, 
      	m( 'a', { 
        	innerHTML: 'mithril.exitable',
        	target   : '_blank',
          href     : 'https://github.com/barneycarroll/mithril.exitable.js/'
        } ),
        ` a component can specify an exit function which allows us to freeze the draw process before it is removed, resuming after its exit promise resolves.`
      )
    )
} )