New class for sections transitions: 'pop'

src/stylesheets/css/Lungo.layout.css

@@ -1,5 +1,7 @@
-section{position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:1;-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);-webkit-backface-visibility:hidden;-webkit-transition:-webkit-transform 250ms cubic-bezier(0.39, 0.575, 0.565, 1);}section:first-child,section.show{-webkit-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);visibility:visible;}
+section{position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:1;-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);-webkit-backface-visibility:hidden;-webkit-transition:-webkit-transform 250ms cubic-bezier(0.39, 0.575, 0.565, 1);}section:first-child,section.show{-webkit-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}
 section.hide{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);}
+section.pop{-webkit-transform:scale(0.5);transform:scale(0.5);opacity:0;-webkit-transition:all 250ms cubic-bezier(0.39, 0.575, 0.565, 1);}section.pop:first-child,section.pop.show{-webkit-transform:scale(1);transform:scale(1);opacity:1;}
+section.pop.hide{-webkit-transform:scale(1.2);transform:scale(1.2);opacity:0;}
 header,footer{position:absolute;left:0px;width:100%;height:38px;display:block;z-index:2;line-height:39px;}
 header{top:0px;}header .onleft{margin-left:4px !important;}
 header .onright{margin-right:4px !important;}

src/stylesheets/less/Lungo.layout.less

@@ -25,13 +25,25 @@ section {
 	
 	.transform(translate3d(100%, 0, 0));
 	-webkit-backface-visibility: hidden;
-	-webkit-transition: -webkit-transform 250ms @defaultTrasition;
+	-webkit-transition: -webkit-transform 250ms @defaultTrasition;	
 	
-	&:first-child, &.show {	
-		.transform(translate3d(0%, 0, 0));
-		visibility: visible; }
-	&.hide { 
-		.transform(translate3d(-100%, 0, 0));}
+	&:first-child, &.show {	.transform(translate3d(0%, 0, 0)); }
+	&.hide { .transform(translate3d(-100%, 0, 0)); }
+	
+	&.pop {
+    	.transform(scale(0.5));
+    	opacity: 0;
+		-webkit-transition: all 250ms @defaultTrasition;
+		
+		&:first-child, &.show {	
+			.transform(scale(1));
+			opacity: 1;
+		}
+		&.hide { 
+			.transform(scale(1.2));
+			opacity: 0;
+		}
+	}
 }
 /* @end */