From d82f3c3be8b95fd0942303b97f536f81510c4d88 Mon Sep 17 00:00:00 2001
From: "hjnim.kim" <hjnim.kim@samsung.com>
Date: Tue, 26 Feb 2013 14:19:27 +0900
Subject: [PATCH] Transition: added more-button vi

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

Change-Id: If54d044aa0bfded418c8100583cd08039f205897
---
 .../widgets/naviframe/naviframe_footer_more.html   |   2 +-
 .../naviframe/naviframe_footer_more_button.html    |   2 +-
 .../tizen/common/jquery.mobile.transitions.css     | 152 +++++++++++++++++++++
 3 files changed, 154 insertions(+), 2 deletions(-)

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 {
-- 
2.7.4