raiden-dev/ko-transitions.html

## ko-transitions.html
<!doctype html>
<html>
<head>
	<title>KnockoutJS Custom Binding: transitions</title>
	<style>
/* WARNING: Only webkit transition defined */
.transitions {
	position: absolute;
	width: 200px;
	height: 200px;
	top: 50%;
	left: 50%;
	margin: -100px 0 0 -100px;
	background: purple;
	border-radius: 100px;
	-webkit-transition: all .5s ease .1s;
}
.transitions:hover {
	width: 250px;
	height: 250px;
	margin: -125px 0 0 -125px;
	border-radius: 125px;
}
	</style>
	<script>
window.fallbacks = {
	"transitions": [
		{
			"on": "mouseover",
			"properties": {
				"width": "250px",
				"height": "250px",
				"marginTop": "-125px",
				"marginLeft": "-125px",
				"borderRadius": "125px"
			},
			"duration": 500,
			"delay": 100
		},
		{
			"on": "mouseout",
			"properties": {
				"width": "200px",
				"height": "200px",
				"marginTop": "-100px",
				"marginLeft": "-100px",
				"borderRadius": "100px"
			},
			"duration": 500,
			"delay": 100
		}
	]
}
	</script>

	<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
</head>
<body>
	<div class="transitions" data-bind="transitionsFallback: fallbacks.transitions"></div>


	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script>

	<script>
/**
 * KO: jQuery fallback for CSS Transitions.
 * @param {array} Fallback JSON.
 * @requires jQuery, Modernizr.csstransitions
 * @example
 * // View
 * <div class="transitions" data-bind="transitionsFallback: fallbacks.transitions"></div>
 */
ko.bindingHandlers.transitionsFallback = {
	init: function(element, valueAccessor) {
		var fallback = valueAccessor();
		var $el = $(element);

		if (!Modernizr.csstransitions) {
			$.each(fallback, function() {
				var param = this;

				$el.on(param.on, function() {
					$(this)
						.delay(param.delay)
						.stop()
						.animate(param.properties, param.duration, function() {
							$(this).trigger('jqtransitionend');
						});
				});
			});
		}
		else {
			return false;
		}
	}
}


$(function() {
	var ViewModel = function() {
		var self = this;

	}

	ko.applyBindings(new ViewModel());
});
	</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>KnockoutJS Custom Binding: transitions</title>
	<style>
	/* WARNING: Only webkit transition defined */
	.transitions {
	position: absolute;
	width: 200px;
	height: 200px;
	top: 50%;
	left: 50%;
	margin: -100px 0 0 -100px;
	background: purple;
	border-radius: 100px;
	-webkit-transition: all .5s ease .1s;
	}
	.transitions:hover {
	width: 250px;
	height: 250px;
	margin: -125px 0 0 -125px;
	border-radius: 125px;
	}
	</style>
	<script>
	window.fallbacks = {
	"transitions": [
	{
	"on": "mouseover",
	"properties": {
	"width": "250px",
	"height": "250px",
	"marginTop": "-125px",
	"marginLeft": "-125px",
	"borderRadius": "125px"
	},
	"duration": 500,
	"delay": 100
	},
	{
	"on": "mouseout",
	"properties": {
	"width": "200px",
	"height": "200px",
	"marginTop": "-100px",
	"marginLeft": "-100px",
	"borderRadius": "100px"
	},
	"duration": 500,
	"delay": 100
	}
	]
	}
	</script>

	<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
	</head>
	<body>
	<div class="transitions" data-bind="transitionsFallback: fallbacks.transitions"></div>


	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script>

	<script>
	/**
	* KO: jQuery fallback for CSS Transitions.
	* @param {array} Fallback JSON.
	* @requires jQuery, Modernizr.csstransitions
	* @example
	* // View
	* <div class="transitions" data-bind="transitionsFallback: fallbacks.transitions"></div>
	*/
	ko.bindingHandlers.transitionsFallback = {
	init: function(element, valueAccessor) {
	var fallback = valueAccessor();
	var $el = $(element);

	if (!Modernizr.csstransitions) {
	$.each(fallback, function() {
	var param = this;

	$el.on(param.on, function() {
	$(this)
	.delay(param.delay)
	.stop()
	.animate(param.properties, param.duration, function() {
	$(this).trigger('jqtransitionend');
	});
	});
	});
	}
	else {
	return false;
	}
	}
	}


	$(function() {
	var ViewModel = function() {
	var self = this;

	}

	ko.applyBindings(new ViewModel());
	});
	</script>
	</body>
	</html>