joshuapekera
7/12/2015 - 2:02 PM

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>