optimization for animation

1. reverse instead of 'back'
2. make mobilebone.css more readable

Author: zhangxinxu

src/mobilebone.css

@@ -8,30 +8,63 @@
 a, img {
     -webkit-touch-callout: none;
 }
-
-html, body {
-	height: 100%;
-    -webkit-user-select: none;
+body {
+	margin: 0;
+	-webkit-user-select: none;
     user-select: none;
 	-ms-touch-action: none;
-	overflow: hidden;
 }
 
-body { margin: 0; }
-
-.page, .mask {
+/* construction */
+html, body, .page {
 	height: 100%; width: 100%;
 	overflow: hidden;
-	position: absolute;
 }
 .page {
+	position: absolute;
 	-webkit-animation: .35s ease-in-out;
 	animation: .35s ease-in-out;
 }
 .page.out {
 	-webkit-transform: translateX(-100%);
 	transform: translateX(-100%);
 }
+.page.in {
+	-webkit-transform: translateX(0);
+	transform: translateX(0);
+}
+
+
+/* mask layer when ajax sending... */
+.mask {
+	height: 100%; width: 100%;
+	background-color: rgba(255,255,255,.35);
+	overflow: hidden;
+	position: absolute;
+}
+.loading { /* more info: http://www.zhangxinxu.com/wordpress/?p=3357 */
+    width: 3px; height:3px;
+    border-radius: 100%;                      
+    box-shadow: 0 -10px 0 1px #333,           /* top, 1px expand */
+                10px 0px #333,                /* right */    
+                0 10px #333,                  /* bottom */
+                -10px 0 #333,                 /* left */
+                              
+                -7px -7px 0 .5px #333,        /* left-top, 0.5px expand */
+                7px -7px 0 1.5px #333,        /* right-top, 1.5px expand */                    
+                7px 7px #333,                 /* right-bottom */
+                -7px 7px #333;                /* left-bottom */
+	-webkit-animation: loading 1s step-start infinite;
+	animation: loading 1s step-start infinite; 
+}
+.mask > .loading {
+	position: absolute;
+	top: 0; right: 0; bottom: 0; left: 0;
+	margin: auto;
+}
+
+
+/* Default animation - slide, you can visit '/test/transition/aniamte.css' to get more styles of animation */
 .slide.in {
 	-webkit-animation-name: slideinfromright;
 	animation-name: slideinfromright;
@@ -40,41 +73,15 @@ body { margin: 0; }
 	-webkit-animation-name: slideouttoleft;
 	animation-name: slideouttoleft;
 }
-.slide.back.out {
+.slide.reverse.out {
 	-webkit-animation-name: slideouttoright;
 	animation-name: slideouttoright;
 }
-.slide.back.in {
+.slide.reverse.in {
 	-webkit-animation-name: slideinfromleft;
 	animation-name: slideinfromleft;
 }
 
-.loading { /* detail: http://www.zhangxinxu.com/wordpress/?p=3357 */
-    width: 3px; height:3px;
-    border-radius: 100%;                      /* 圆角 */
-    box-shadow: 0 -10px 0 1px #333,           /* 上, 1px 扩展 */
-                10px 0px #333,                /* 右 */    
-                0 10px #333,                  /* 下 */
-                -10px 0 #333,                 /* 左 */
-                              
-                -7px -7px 0 .5px #333,        /* 左上, 0.5px扩展 */
-                7px -7px 0 1.5px #333,        /* 右上, 1.5px扩展 */                    
-                7px 7px #333,                 /* 右下 */
-                -7px 7px #333;                /* 左下 */
-	-webkit-animation: loading 1s step-start infinite;
-	animation: loading 1s step-start infinite; 
-}
-
-.mask {
-	background-color: rgba(255,255,255,.35);
-}
-.mask > .loading {
-	position: absolute;
-	top: 0; right: 0; bottom: 0; left: 0;
-	margin: auto;
-}
-
-/* animation */
 @-webkit-keyframes slideinfromright {
     from { -webkit-transform: translateX(100%); }
     to { -webkit-transform: translateX(0); }
@@ -108,15 +115,7 @@ body { margin: 0; }
     to { transform: translateX(100%); }
 }
 
-@-webkit-keyframes spin {
-    from { -webkit-transform: rotate(0deg); }
-      to { -webkit-transform: rotate(360deg); }
-}
-@keyframes spin {
-    from { transform: rotate(0deg); }
-      to { transform: rotate(360deg); }
-}
-
+/* chrysanthemum loading effect */
 @-webkit-keyframes loading {
      0% { -webkit-transform: rotate(0deg); }
 	 12% { -webkit-transform: rotate(45deg); }

src/mobilebone.js

@@ -133,6 +133,8 @@
 			animationend: this.animationend,
 			callback: this.callback
 		}, params = function(element) {
+			if (!element || !element.getAttribute) return {};
+			
 			var _params = {}, _dataparams = (element.getAttribute("data-params") || '').queryToObject();
 
 			// rules as follow:
@@ -148,19 +150,19 @@
 			return _params;
 		};
 
+		// get params of each 
+		var params_out = params(pageOut), params_in = params(pageInto);
+		
 		if (pageOut != null && pageOut.classList) {
-			var params_out = params(pageOut);
 			// do transition
 			pageOut.classList.add("out");
 			pageOut.classList.add(params_out.form);
 			pageOut.classList.remove("in");
 			// if reverse direction
-			pageOut.classList[back? "add": "remove"]("back");
+			pageOut.classList[back? "add": "remove"]("reverse");
 
 		}
-		if (pageInto != null && pageInto.classList) {
-			var params_in = params(pageInto);
-			
+		if (pageInto != null && pageInto.classList) {			
 			// for title change
 			var title = params_in.title, header = document.querySelector("h1");		
 			// do title change	
@@ -185,7 +187,7 @@
 			pageInto.classList.add("in");
 			pageOut && pageInto.classList.add(params_in.form);
 			// if reverse direction
-			pageInto.classList[back? "add": "remove"]("back");
+			pageInto.classList[back? "add": "remove"]("reverse");
 
 			// do callback when come in first time
 			var onpagefirstinto = params_in.onpagefirstinto;