VelocityTransitionGroup

velocity-transition.coffee

React = require "react"
Style = require 'utils/style-constants'
_ = require 'lodash'

ReactTransitionGroup = React.addons.TransitionGroup

VelocityTransitionGroupChild = React.createClass

	displayName: "VelocityTransitionGroupChild"

	getTransitionProperties: (transition, type) ->
		@transitions()[transition][type]

	getDelay: (transition, type) ->
		@transitions()[transition]?.delay?[type] or 0

	getEasing: (transition, type) ->
		@transitions()[transition]?.easing?[type] or Style.transitionEasing

	transitions: ->

		slideLeft:
			enter:
				opacity: [1, 0]
				translateX: [0,'100%']
				height: [0,0]
			leave:
				opacity: [0, 1]
				translateX: ['-100%',0]
				height: [0,0]

		slideRight:
			enter:
				opacity: [1, 0]
				translateX: [0,'-100%']
				height: [0,0]
			leave:
				opacity: [0, 1]
				translateX: ['100%',0]
				height: [0,0]

		slideUp:
			enter:
				opacity: [1, 0]
				translateY: [0,@_screenHeight()]
				height: [0,0]
			leave:
				opacity: [0, 1]
				translateY: ["-#{@_screenHeight()}",0]
				height: [0,0]

		flipY:
			enter:
				opacity: [1, 0.1]
				rotateY: [0,90]
				height: [0,0]
			leave:
				opacity: [0.1, 1]
				rotateY: [-90,0]
				height: [0,0]
			delay:
				enter: @props.duration
			easing:
				enter: 'easeInCubic'
				leave: 'easeOutCubic'

		batman:
			enter:
				opacity: [1, 0]
				rotateZ: [0,720]
				scale: [1,0]
				height: [@_screenHeight(), @_screenHeight()]
			leave:
				opacity: [0, 1]
				rotateZ: [-720,0]
				scale: [0,1]
				height: [@_screenHeight(), @_screenHeight()]
			delay:
				enter: @props.duration
			easing:
				enter: 'easeInCubic'
				leave: 'easeOutCubic'

		slideDown:
			enter:
				opacity: [1, 0]
				translateY: [0,"-#{@_screenHeight()}"]
				height: [0,0]
			leave:
				opacity: [0, 1]
				translateY: [@_screenHeight(),0]
				height: [0,0]

		fade:
			enter:
				opacity: [1, 0]
				height: [0,0]
			leave:
				opacity: [0, 1]
				height: [0,0]

	_screenHeight: ->
		window?.innerHeight or '100px'

	transition: (animationType, finishCallback) ->
		@transitioning = true
		node = @getDOMNode()
		transitionProperties = @getTransitionProperties @props.transition, animationType
		$.Velocity
				elements: node
			,
				transitionProperties
			,
				duration: @props.duration
				easing: @getEasing @props.transition, animationType
				delay: @getDelay @props.transition, animationType
				complete: =>
					@transitioning = false
					finishCallback?()
		return


	componentDidMount: ->
		_.delay =>
			if not @transitioning
				@setState style: {}
			else

	componentWillUnmount: ->
		clearTimeout @timeout  if @timeout
		return

	componentWillEnter: (done) ->
		if @props.enter
			@transition "enter", done
		else
			done()
		return

	componentWillLeave: (done) ->
		if @props.leave
			@transition "leave", done
		else
			done()
		return

	getInitialState: ->
		style:
			opacity: 0
			height: 0

	render: ->
		React.DOM.div
			style: @state.style
		, React.Children.only @props.children

VelocityTransitionGroup = React.createClass
	displayName: "VelocityTransitionGroup"
	propTypes:
		duration: React.PropTypes.number
		transitionEnter: React.PropTypes.bool
		transitionLeave: React.PropTypes.bool
		transition: React.PropTypes.oneOfType [
			React.PropTypes.string
			React.PropTypes.object
		]

	getDefaultProps: ->
		transition: 'fade'
		duration: Style.transitionSpeed*2
		transitionEnter: true
		transitionLeave: true

	_wrapChild: (child) ->
		VelocityTransitionGroupChild
			transition: @props.transition
			duration: @props.duration
			enter: @props.transitionEnter
			leave: @props.transitionLeave
		, child

	render: ->
		@transferPropsTo ReactTransitionGroup
			childFactory: @_wrapChild
			className: 'transition-group'
		, @props.children

module.exports = VelocityTransitionGroup

hi..do you have any example using it??preferably in plain js??..thanks

Just wrap the elements you want to transition in the VelocityTransitionGroup, just like you would with the default CSSTransitionGroup. It takes an optional 'transition' property.