bennadel · March 19, 2013 13:58
diff --git a/css-transition-timing.htm b/css-transition-timing.htm
 <!doctype html>
 <html>
 <head>
 	<meta charset="utf-8" />

 	<title>
 		CSS Transitions And Class Timing
 	</title>

 	<style type="text/css">

 		div.box {
 			background-color: #FAFAFA ;
 			border: 1px solid #CCCCCC ;
 			height: 100px ;
 			left: 20px ;
 			line-height: 100px ;
 			position: fixed ;
 			text-align: center ;
 			top: 120px ;
 			width: 100px ;
 		}

 		div.moved {
 			left: 400px ;
 		}

 		div.transition {
 			transition: left 1s ease ;
 				-webkit-transition: left 1s ease ;
 		}

 	</style>
 </head>
 <body>

 	<h1>
 		CSS Transitions And Class Timing
 	</h1>

 	<p>
 		<a href="#" class="add">Add</a>
 		&mdash;
 		<a href="#" class="remove">Remove</a>
 		&mdash;
 		<a href="#" class="remove-delay">Remove Delay</a>
 		&mdash;
 		<a href="#" class="remove-redraw">Remove Redraw</a>
 	</p>

 	<div class="box">
 		I Am Box
 	</div>



 	<!-- Load jQuery from the CDN. -->
 	<script
 		type="text/javascript"
 		src="//code.jquery.com/jquery-1.9.1.min.js">
 	</script>
 	<script type="text/javascript">

 		var box = $( "div.box" );

 		// Add both classes at the same time.
 		$( "a.add" ).click(
 			function() {

 				box.addClass( "moved transition" );

 			}
 		);

 		// Remove both classes at the same time.
 		$( "a.remove" ).click(
 			function() {

 				box.removeClass( "moved transition" );

 			}
 		);

 		// Remove the transition class after delay.
 		$( "a.remove-delay" ).click(
 			function() {

 				box.removeClass( "moved" );

 				setTimeout(
 					function() {

 						box.removeClass( "transition" );

 					},
 					10
 				);

 			}
 		);

 		// Remove the transition class after forced repaint. I got
 		// this tip from Alex McCaw.
 		$( "a.remove-redraw" ).click(
 			function() {

 				box.removeClass( "moved" );

 				// Forces a repaint in most browsers (apparently).
 				var height = box[ 0 ].offsetHeight;

 				box.removeClass( "transition" );

 			}
 		);

 	</script>

 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8" />

	<title>
	CSS Transitions And Class Timing
	</title>

	<style type="text/css">

	div.box {
	background-color: #FAFAFA ;
	border: 1px solid #CCCCCC ;
	height: 100px ;
	left: 20px ;
	line-height: 100px ;
	position: fixed ;
	text-align: center ;
	top: 120px ;
	width: 100px ;
	}

	div.moved {
	left: 400px ;
	}

	div.transition {
	transition: left 1s ease ;
	-webkit-transition: left 1s ease ;
	}

	</style>
	</head>
	<body>

	<h1>
	CSS Transitions And Class Timing
	</h1>

	<p>
	<a href="#" class="add">Add</a>
	—
	<a href="#" class="remove">Remove</a>
	—
	<a href="#" class="remove-delay">Remove Delay</a>
	—
	<a href="#" class="remove-redraw">Remove Redraw</a>
	</p>

	<div class="box">
	I Am Box
	</div>



	<!-- Load jQuery from the CDN. -->
	<script
	type="text/javascript"
	src="//code.jquery.com/jquery-1.9.1.min.js">
	</script>
	<script type="text/javascript">

	var box = $( "div.box" );

	// Add both classes at the same time.
	$( "a.add" ).click(
	function() {

	box.addClass( "moved transition" );

	}
	);

	// Remove both classes at the same time.
	$( "a.remove" ).click(
	function() {

	box.removeClass( "moved transition" );

	}
	);

	// Remove the transition class after delay.
	$( "a.remove-delay" ).click(
	function() {

	box.removeClass( "moved" );

	setTimeout(
	function() {

	box.removeClass( "transition" );

	},
	10
	);

	}
	);

	// Remove the transition class after forced repaint. I got
	// this tip from Alex McCaw.
	$( "a.remove-redraw" ).click(
	function() {

	box.removeClass( "moved" );

	// Forces a repaint in most browsers (apparently).
	var height = box[ 0 ].offsetHeight;

	box.removeClass( "transition" );

	}
	);

	</script>

	</body>
	</html>