zvodd
9/11/2017 - 2:39 PM

wierd js animation system

wierd js animation system

testanim.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style type="text/css" media="screen">


html { font-size: 62.5%; }
body{
	margin: 10px;
	padding: 0;
	background-color: #fafafa;
	font-size: 14px; font-size: 1.4rem;
}

.wrapper{
	margin: 0 auto;
	width: calc(100% - 40px);
	height: 200px;
	position: relative;
	/*border: 3px solid green; */
	background-color: #DDD;
	background:
			repeating-linear-gradient(45deg, rgba(200, 0, 0, .5), rgba(200, 0, 0, .5) 1.1rem, rgba(0, 0, 0, 0) 1.1rem, rgba(0, 0, 0, 0) 2.2rem),
			repeating-linear-gradient(-45deg, rgba(200, 0, 0, .5), rgba(200, 0, 0, .5) 1.1rem, #777 1.1rem, #777 2.2rem);
	box-shadow: 
		2.2rem 2.2rem rgba(200, 0, 0, .5)   inset,
		-2.2rem 2.2rem rgba(200, 0, 0, .5)  inset,
		2.2rem -2.2rem rgba(200, 0, 0, .5)  inset,
		-2.2rem -2.2rem rgba(200, 0, 0, .5) inset;
}

.textout{
	background-color: #111;
	color:#EEE;
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.textout_word{
	opacity:0;
	font-size: 7REM;
}

.textout:hover .textout_word{
	/*visibility: initial;*/
	animation-name: drop_in;
	animation-fill-mode: forwards;
	animation-duration: 0.8s;
	
}

@keyframes drop_in {
  0% {
	transform: translate(-3em, -3em) rotate(-90deg);
	opacity: 0.3;
  }
  70% {
	transform: translate(-1em, -2em) rotate(-35deg);
  }
  100% {
	transform: translate(0, 0) rotate(0);
	opacity: 1;
  }
}
	</style>
</head>
<body>
<div class="wrapper">
<div class="textout">
	<div class="textout_word">HELLO</div>
</div>
</div>

<script type="text/javascript">

var Animation_System = (animation_element) =>{
	if (typeof(animation_element) === "undefined"){
		throw "No animation element parameter. "
	}
	else if (typeof(animation_element) === "string"){
		var anim_el = document.querySelector(animation_element);
	}
	else{
		var anim_el = animation_element;
	}

	var AnimSys = self = {
		anim_el : anim_el,
		ahooks : {},
		_in_hook : false,
		_AnimationListener : (e) => {
			current_anim_hook = null;
			if (self.ahooks.hasOwnProperty(e.animationName)){
				current_anim_hook = AnimSys.ahooks[e.animationName];
			}else{
				return;
			}
			event_type = null;
			if (e.type.toLowerCase().indexOf("animationend") >= 0) {
				event_type = "end";
				current_anim_hook=current_anim_hook["end"];
			}else if (e.type.toLowerCase().indexOf("animationstart") >= 0) {
				event_type = "start";
				current_anim_hook=current_anim_hook["start"];
			}

			if (typeof event_type !== "null"){	
				for (var hookindex = 0; hookindex < current_anim_hook.length; hookindex++){	
					// current_anim_hook[event_type][hookindex](e);
					if (current_anim_hook[hookindex] != null){
						self.animation_name = e.animationName;
						self.animation_type = event_type;
						self._hook_index = hookindex;
						self._in_hook = true;
						current_anim_hook[hookindex].apply(self, [e]);
						self._in_hook = false;
					}
				}
				for (var hookindex = current_anim_hook.length; hookindex >=0 ; hookindex--){
					if (current_anim_hook[hookindex] === null){
						current_anim_hook.splice(hookindex, 1);
					}
				}
			}
			else{console.log("event_type undefined");}
		},
		_add_hook: (anim_name, event_type, handler) =>{
			handler = handler.bind(self);
			
			if (self.ahooks.hasOwnProperty(anim_name)){
				if (self.ahooks[anim_name].hasOwnProperty(event_type)){
					var evs = self.ahooks[anim_name];
					var new_evs = [...self.ahooks[anim_name][event_type], handler];
					self.ahooks[anim_name] = Object.assign(evs, {[event_type]:new_evs});
				}
				else{
					console.log("can this be reached under normal conditions???");
					self.ahooks[anim_name][event_type] = [handler];
				}
			}
			else{
				self.ahooks[anim_name] = Object.assign({}, {[event_type]:[handler]})
			}
		},
		start: (name, handler) =>{
			self._add_hook(name, "start", handler);
			return self
		},
		end : (name, handler) =>{
			self._add_hook(name, "end", handler);
			return self
		},
		_current_anim_hook: () => {
			if (self._in_hook){
				return self.ahooks[self.animation_name][self.animation_type][self._hook_index];
			}
		},
		remove_current_hook: () => {
			if (!self._in_hook){
				return
			}
			self.ahooks[self.animation_name][self.animation_type][self._hook_index] = null;
		}
	}

	// enumerate methods in animSys
	for (var property in AnimSys) {
		if (AnimSys.hasOwnProperty(property)) {
			if (typeof AnimSys[property] === "function"){
				console.log("method", property);
				// bind methods to object
				AnimSys[property] = AnimSys[property].bind(AnimSys);
			}
		}
	}

	anim_el.addEventListener("animationstart", AnimSys._AnimationListener, false);
	anim_el.addEventListener("animationiteration", AnimSys._AnimationListener, false);
	anim_el.addEventListener("animationend", AnimSys._AnimationListener, false);

	return AnimSys;

}
animSys = Animation_System(".textout");
// animSys={
// 	drop_in:{
// 		end: (e) =>{
// 			throw 1;
// 			console.log("drop_in ended.");
// 		},
// 	},
// }
animSys.start("drop_in", function(e){
	console.log("drop_in start HOOK1");
}).end("drop_in", function(e) {
	console.log("drop_in end HOOK1, event:", e, "\nThis:", this )
	animSys.end("drop_in", function(e){
		console.log("replaced");
	});
	this.remove_current_hook()
	animSys.end("drop_in", function(e){
		console.log("replaced 2");
	});
}).end("drop_in", function(e) {
	console.log("drop_in end HOOK 2" )
})
</script>
</body>
</html>