CSSのanimationやtransitionの終了をJavascriptで検知する

簡単なサンプルを作成。
まずはHTML。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TEST</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" charset="utf-8"></script>
<script src="zoom.js" charset="utf-8"></script>
</head>
<body>
<button type="button" id="btn">btn</button><br>
<div class="container">
	<div class="box">
		<div class="inner"></div>
	</div>
</div>
</body>
</html>

つづいてCSS。ボックスが中心に表示されるように設定。

button {
	font-size: 16px;
}

.container {
	position: relative;
	vertical-align: top;
	position: relative;
	width: 480px;
	height: 480px;
	border: 1px solid #ddd;
}

.box {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 200px;
	height: 200px;
	background: #99b1ee;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform   : translate(-50%, -50%);
	-ms-transform    : translate(-50%, -50%);
	transform        : translate(-50%, -50%);
	-webkit-transition: all 1s ease 0s;
	transition        : all 1s ease 0s;
}

.box.active {
	width: 300px;
	height: 300px;
}

最後にJS。

$(function() {
	var transitionEndEvents = [
		'webkitTransitionEnd',
		'mozTransitionEnd',
		'oTransitionEnd',
		'transitionend'
	];
	var animEnd = transitionEndEvents.join(' ')

	$('.box').on(animEnd, function() {
		alert('done!');
	});
	
	$('#btn').on('click', function() {
		var $el = $('.box');
		if ($el.hasClass('active')) {
			$el.removeClass('active');
			return false;
		}
		$el.addClass('active');
	});
});

CSSの.activeで、widthとheightを変更しているので、完了後のアラートは２回表示さる。

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル