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 (file)
--- 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 (file)
--- 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 (file)
--- 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 {