jgable/react-visualstatemanager-notes.md

## react-visualstatemanager-notes.md

      
    Raw
  

              react-visualstatemanager-notes.md
            
          
    React VisualStateManager

A declarative visual state transition manager.
Wishlist

var { VisualStateComponent, VisualState, ColorAnimation } = require('vsm');

class StopLight extends VisualStateComponent {
  componentDidMount() {
    this.interval = setInterval(this.cycleLights, 20000);
  }
  
  componentWillUnMount() {
	clearInterval(this.interval);  
  }
  
  render() {
	return (
	  <div className="stoplight">
	  	<div className="light top"></div>
		<div className="light mid"></div>
		<div className="light bot"></div>
	  </div>
	);
  }
  
  getVisualState() {
	return (
	  <VisualState name="stop">
	    <ColorAnimation target=".top" from="transparent" to="red" duration="0.300" />
	  </VisualState>
	  <VisualState name="caution">
	    <ColorAnimation target=".mid" from="transparent" to="yellow" duration="0.300" />
	  </VisualState>
	  <VisualState name="go">
	    <ColorAnimation target=".bot" from="transparent" to="green" duration="0.300" />
	  </VisualState>
	);
  },
  
  cycleLights() {
	this.goToVisualState('stop');
	setTimeout(function () {
	  this.goToVisualState('go');
	  
	  setTimeout(function () {
		this.goToVisualState('caution');
		
		setTimeout(function () {
		  this.goToVisualState('stop');
		}.bind(this), 3000);
	  }.bind(this), 5000);
	}.bind(this), 2000);  
  }
}