animation and deferred

animation.js

$(function(){
	
	function test01() {
		console.log('test01');
		var d = new $.Deferred();
		$('#box').on('webkitAnimationEnd', function(){
			d.resolve(); // ここはanimationが終了したら呼ばれる。resolveを呼ぶと次のdeferredへ処理が移る
		}).addClass('move01');
		return d.promise();
	}
	
	function test02() {
		console.log('test02');
		var d = new $.Deferred();
		$('#box').removeClass('move01');
		$('#box').on('webkitAnimationEnd', function(){
			d.resolve(); // ここはanimationが終了したら呼ばれる。resolveを呼ぶと次のdeferredへ処理が移る
		}).addClass('move02');
		return d.promise();
	}
	
	function test03() {
		console.log('test03');
		$('#box').removeClass('move02');
	}
	
	function playAnimation(){
		var promise = Promise.resolve();
		promise.then(test01).then(test02).then(test03).then(function(){
			console.log('callbacked')
		}).catch(function(error){
			console.error(error);
		});
	}
	
	//ボタン
	$('button').on('click',function(){
		playAnimation();
	});
		
});