Browse Source

Changes on section animations

@soyjavi 14 năm trước cách đây
mục cha
commit
fc067815ce

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 1 - 1
src/stylesheets/css/Lungo.layout.article.css


Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 1 - 1
src/stylesheets/css/Lungo.layout.css


+ 1 - 0
src/stylesheets/css/Lungo.theme.default.css

@@ -40,6 +40,7 @@ footer {
 }
 article {
   background-color: #EBEBEB;
+  background: none;
 }
 article .title {
   color: #797979;

+ 3 - 1
src/stylesheets/less/Lungo.layout.article.less

@@ -23,18 +23,20 @@ article {
 	height: auto;
 	top: 0px;
 	bottom: 0px;
+	
+	display: none;
 	visibility: hidden;
 	z-index: 0;
 	
 	&.current {
     	visibility: visible;
+	    display: block;
 		z-index: 1;
 	}
 	
 	& .title {
     	font-size: 1.1em;
 		margin: 0px 0 4px;
-		
 		& .icon { margin-right: 4px; }
 	}
 	

+ 12 - 15
src/stylesheets/less/Lungo.layout.less

@@ -11,6 +11,10 @@
 @import "mixins.less";
 
 /* @group <section> */
+html {
+    overflow: hidden;
+}
+
 section {
 	position: absolute; /* position: fixed on iOS5 & Android 4 */
 	left:  0px;
@@ -19,43 +23,36 @@ section {
 	height: 100%;
 	z-index: 0;
 	
-	display: block;
+	display: none;
 	visibility: hidden;
+	.transition(all 250ms @defaultTrasition);
 	-webkit-backface-visibility: hidden;
 	
 	&:first-child, &.show {	
 		z-index: 1;
-		//display: block;
+		display: block;
 		visibility: visible;
 	}
 	&.hide { 
 		z-index: 0;
-		//display: none;
+		display: none;
 		visibility: hidden;
 	}
 	
+	&.slide, &.pop { display: block !important; }
+	
 	&.slide {
 		.transform(translate(100%, 0));
-		//display: block;
 		visibility: visible !important;
 		
-		-webkit-transition: -webkit-transform 250ms @defaultTrasition;
-		/*
-	   -moz-transition: @keyframe @defaultTrasition;
-         -o-transition: @keyframe @defaultTrasition;
-            transition: @keyframe @defaultTrasition;
-		*/
-		
 		&:first-child, &.show {	.transform(translate(0%, 0)); }
 		&.hide { .transform(translate(-100%, 0)); }
 	}
-	
-	
+		
 	&.pop {
     	opacity: 0;
-		-webkit-transition: all 250ms @defaultTrasition;
     	.transform(scale(1.15));
-		
+    	
 		&:first-child, &.show {	
 			.transform(scale(1));
 			opacity: 1;

+ 1 - 2
src/stylesheets/less/Lungo.theme.default.less

@@ -68,10 +68,9 @@ footer {
 	//border-bottom-right-radius: 5px;
 }
 
-
-
 article {
 	background-color: #EBEBEB;
+	background: none;
 	& .title {
     	color: #797979;
     	text-shadow: 0px 1px 0px #fff;