JavaScriptでtransitionの指定をする

CSSであらかじめclassを用意するのではなく、JavaScriptでtransitionの値を指定してアニメーションできるかを試してみました。

サンプルコード

移動距離と時間をJavaScriptでランダムに指定するようにしてみます。

HTML

<button id="start">アニメーション実行</button>
<div id="sample"></div>

CSS

#sample {
	width: 100px;
	height: 100px;
	background: #000;
	-webkit-transform: translateX(0px);
	transform: translateX(0px);
}

JavaScript

$(function() {
	$('#start').on('click', function() {
		// 値をランダムで決める
		var movePoint = getRandomInt(100, 500); // 移動位置
		var duration = getRandomInt(200, 1000); // 移動時間

		console.log('距離:',movePoint,'時間:',duration)

		// styleを指定
		$('#sample').css({
			transform: 'translateX(' + movePoint + 'px)',
			transition: duration + 'ms linear'
		});

		// アニメーション終了後、styleを削除
		setTimeout(function() {
			$('#sample').removeAttr('style');
		}, duration);
	});
});

// minからmaxまでの乱整数を返す関数
function getRandomInt(min, max) {
	return Math.floor( Math.random() * (max - min + 1) ) + min;
}

JavaScriptでtransitionの値を指定するデモページ