From: hjnim.kim <hjnim.kim@samsung.com>
Date: Tue, 26 Feb 2013 05:19:27 +0000 (+0900)
Subject: Transition: added more-button vi
X-Git-Tag: accepted/tizen_2.1/20130425.023924~7^2~68
X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=d82f3c3be8b95fd0942303b97f536f81510c4d88;p=platform%2Fframework%2Fweb%2Fweb-ui-fw.git

Transition: added more-button vi

Transitions ( slideupfade, slidedownfade ) have beed added
applied more-popup in tizen-winset demo

Change-Id: If54d044aa0bfded418c8100583cd08039f205897
---

diff --git a/demos/tizen-winsets/widgets/naviframe/naviframe_footer_more.html b/demos/tizen-winsets/widgets/naviframe/naviframe_footer_more.html
index cf672b4..4f82c58 100644
--- a/demos/tizen-winsets/widgets/naviframe/naviframe_footer_more.html
+++ b/demos/tizen-winsets/widgets/naviframe/naviframe_footer_more.html
@@ -19,7 +19,7 @@
 		<p>Footer more sample</p>
 	</div>
 	<div data-role="footer">
-		<a href="#pop_js" data-role="button"  data-icon="naviframe-more" data-rel="popup"></a>
+		<a href="#pop_js" data-role="button"  data-icon="naviframe-more" data-transition="slideupfade" data-rel="popup"></a>
 
 		<div id="pop_js" data-role="popup" >
 		<ul data-role="listview">
diff --git a/demos/tizen-winsets/widgets/naviframe/naviframe_footer_more_button.html b/demos/tizen-winsets/widgets/naviframe/naviframe_footer_more_button.html
index 36218fa..8237535 100644
--- a/demos/tizen-winsets/widgets/naviframe/naviframe_footer_more_button.html
+++ b/demos/tizen-winsets/widgets/naviframe/naviframe_footer_more_button.html
@@ -19,7 +19,7 @@
 		<p>Footer more sample</p>
 	</div>
 	<div data-role="footer">
-		<a href="#pop_js" data-role="button"  data-icon="naviframe-more" data-transition="popbottom" data-rel="popup"></a>
+		<a href="#pop_js" data-role="button"  data-icon="naviframe-more" data-transition="slidedownfade" data-rel="popup"></a>
 
 		<div data-role="button" data-inline="true" data-style="round">Button1</div>
 		<div data-role="button" data-inline="true" data-style="round">Button2</div>
diff --git a/src/themes/tizen/common/jquery.mobile.transitions.css b/src/themes/tizen/common/jquery.mobile.transitions.css
index c18e491..24c2322 100644
--- a/src/themes/tizen/common/jquery.mobile.transitions.css
+++ b/src/themes/tizen/common/jquery.mobile.transitions.css
@@ -513,6 +513,158 @@
     to { -moz-transform: translate3d(0, 100%, 0); }
 }
 
+/* slide up + fade */
+
+.slideupfade.out {
+	-webkit-animation-name: fadeout;
+	-moz-animation-name: fadeout;
+	-webkit-animation-duration: 100ms;
+	-moz-animation-duration: 100ms;
+}
+
+.slideupfade.in {
+	-webkit-transform: translate3d(0, 0, 0);
+	-webkit-animation-name: slideupfadeinfrombottom;
+	-moz-transform: translate3d(0, 0, 0);
+	-moz-animation-name: slideupfadeinfrombottom;
+	-webkit-animation-duration: 250ms;
+	-moz-animation-duration: 250ms;
+}
+
+.slideupfade.in.reverse {
+	-webkit-animation-name: fadein;
+	-moz-animation-name: fadein;
+	-webkit-animation-duration: 150ms;
+	-moz-animation-duration: 150ms;
+}
+
+.slideupfade.out.reverse {
+	-webkit-transform: translate3d(0, 5%, 0);
+	-moz-transform: translate3d(0, 5%, 0);
+	-webkit-animation-name: slideupfadeouttobottom;
+	-moz-animation-name: slideupfadeouttobottom;
+	-webkit-animation-duration: 200ms;
+	-moz-animation-duration: 200ms;
+}
+
+@-webkit-keyframes slideupfadeinfrombottom {
+    from {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 5%, 0);
+	}
+    to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+	}
+}
+@-moz-keyframes slideupfadeinfrombottom {
+    from {
+		opacity: 0;
+		-moz-transform: translate3d(0, 5%, 0);
+	}
+    to {
+		opacity: 1;
+		-moz-transform: translate3d(0, 0, 0);
+	}
+}
+
+@-webkit-keyframes slideupfadeouttobottom {
+    from {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+	}
+    to {
+		opacity: 0;
+		-webkit-transform: translate3d(0, 5%, 0);
+	}
+}
+@-moz-keyframes slideupfadeouttobottom {
+    from {
+		opacity: 1;
+		-moz-transform: translate3d(0, 0, 0);
+	}
+    to {
+		opacity: 0;
+		-moz-transform: translate3d(0, 5%, 0);
+	}
+}
+
+/* slide down + fade */
+
+.slidedownfade.out {
+	-webkit-animation-name: fadeout;
+	-moz-animation-name: fadeout;
+	-webkit-animation-duration: 100ms;
+	-moz-animation-duration: 100ms;
+}
+
+.slidedownfade.in {
+	-webkit-transform: translate3d(0, 0, 0);
+	-webkit-animation-name: slidedownfadeinfromtop;
+	-moz-transform: translate3d(0, 0, 0);
+	-moz-animation-name: slidedownfadeinfromtop;
+	-webkit-animation-duration: 250ms;
+	-moz-animation-duration: 250ms;
+}
+
+.slidedownfade.in.reverse {
+	-webkit-animation-name: fadein;
+	-moz-animation-name: fadein;
+	-webkit-animation-duration: 150ms;
+	-moz-animation-duration: 150ms;
+}
+
+.slidedownfade.out.reverse {
+	-webkit-transform: translate3d(0, -5%, 0);
+	-moz-transform: translate3d(0, -5%, 0);
+	-webkit-animation-name: slidedownfadeouttotop;
+	-moz-animation-name: slidedownfadeouttotop;
+	-webkit-animation-duration: 200ms;
+	-moz-animation-duration: 200ms;
+}
+
+@-webkit-keyframes slidedownfadeinfromtop {
+    from {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -5%, 0);
+	}
+    to {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+	}
+}
+@-moz-keyframes slidedownfadeinfromtop {
+    from {
+		opacity: 0;
+		-moz-transform: translate3d(0, -5%, 0);
+	}
+    to {
+		opacity: 1;
+		-moz-transform: translate3d(0, 0, 0);
+	}
+}
+
+@-webkit-keyframes slidedownfadeouttotop {
+    from {
+		opacity: 1;
+		-webkit-transform: translate3d(0, 0, 0);
+	}
+    to {
+		opacity: 0;
+		-webkit-transform: translate3d(0, -5%, 0);
+	}
+}
+@-moz-keyframes slidedownfadeouttotop {
+    from {
+		opacity: 1;
+		-moz-transform: translate3d(0, 0, 0);
+	}
+    to {
+		opacity: 0;
+		-moz-transform: translate3d(0, -5%, 0);
+	}
+}
+
 /* slide fade */
 
 .slidefade.out {