transition: adds support depth transition

The depth transition is page transitioning method for list. (VI-COM.005)

Change-Id: Ibb61b1bb8b289fc46c1d8ce9e7c72d7b06769205

diff --git a/demos/tizen-winsets/tips/page-transition/transition.html b/demos/tizen-winsets/tips/page-transition/transition.html
index bc88f56..783678c 100644 (file)
--- a/demos/tizen-winsets/tips/page-transition/transition.html
+++ b/demos/tizen-winsets/tips/page-transition/transition.html
@@ -5,6 +5,7 @@
        </div>
        <div data-role="content">
                <ul data-role="listview" data-icon="1line-textonly">
+                       <li><a href="transition-page.html" data-transition="depth">depth</a></li>
                        <li><a href="transition-page.html" data-transition="fade">fade</a></li>
                        <li><a href="transition-page.html" data-transition="pop">pop</a></li>
                        <li><a href="transition-page.html" data-transition="flip">flip</a></li>

diff --git a/src/themes/tizen/common/jquery.mobile.transitions.css b/src/themes/tizen/common/jquery.mobile.transitions.css
index 5fa52cd..c18e491 100644 (file)
--- a/src/themes/tizen/common/jquery.mobile.transitions.css
+++ b/src/themes/tizen/common/jquery.mobile.transitions.css
@@ -632,3 +632,149 @@
     from { -moz-transform: rotateY(90deg) scale(.9); }
     to { -moz-transform: rotateY(0); }
 }
+
+
+/* depth */
+
+.depth {
+       -webkit-transform-origin: 50% 50%;
+       -moz-transform-origin: 50% 50%;
+}
+
+.depth.out {
+       -webkit-animation-name: depthout;
+       -moz-animation-name: depthout;
+       opacity: 0;
+       -webkit-animation-duration: 250ms;
+       -moz-animation-duration: 250ms;
+       -webkit-animation-timing-function: ease;
+       -moz-animation-timing-function: ease;
+}
+
+.depth.in {
+       -webkit-transform: scale(1);
+       -moz-transform: scale(1);
+       opacity: 1;
+       -webkit-animation-name: depthin;
+       -moz-animation-name: depthin;
+       -webkit-animation-duration: 350ms;
+       -moz-animation-duration: 350ms;
+       -webkit-animation-timing-function: ease;
+       -moz-animation-timing-function: ease;
+}
+
+.depth.in.reverse {
+       -webkit-animation-name: depthinreverse;
+       -moz-animation-name: depthinreverse;
+}
+
+.depth.out.reverse {
+       -webkit-transform: scale(.9);
+       -moz-transform: scale(.9);
+       -webkit-animation-name: depthoutreverse;
+       -moz-animation-name: depthoutreverse;
+}
+
+@-webkit-keyframes depthout {
+    from {
+        -webkit-transform: scale(1);
+        opacity: 1;
+    }
+    to {
+        -webkit-transform: scale(1.1);
+        opacity: 0;
+    }
+}
+
+@-moz-keyframes depthout {
+    from {
+        -moz-transform: scale(1);
+        opacity: 1;
+    }
+    to {
+        -moz-transform: scale(1.1);
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes depthin {
+    0% {
+        -webkit-transform: scale(.9);
+        opacity: 0;
+    }
+    30% {
+        -webkit-transform: scale(.9);
+        opacity: 0;
+    }
+    100% {
+        -webkit-transform: scale(1);
+        opacity: 1;
+    }
+}
+
+@-moz-keyframes depthin {
+    0% {
+        -moz-transform: scale(.9);
+        opacity: 0;
+    }
+    30% {
+        -moz-transform: scale(.9);
+        opacity: 0;
+    }
+    100% {
+        -moz-transform: scale(1);
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes depthinreverse {
+    0% {
+        -webkit-transform: scale(1.1);
+        opacity: 0;
+    }
+    30% {
+        -webkit-transform: scale(1.1);
+        opacity: 0;
+    }
+    100% {
+        -webkit-transform: scale(1);
+        opacity: 1;
+    }
+}
+
+@-moz-keyframes depthinreverse {
+    0% {
+        -moz-transform: scale(1.1);
+        opacity: 0;
+    }
+    30% {
+        -moz-transform: scale(1.1);
+        opacity: 0;
+    }
+    100% {
+        -moz-transform: scale(1);
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes depthoutreverse {
+    from {
+        -webkit-transform: scale(1);
+        opacity: 1;
+    }
+    to {
+        -webkit-transform: scale(.9);
+        opacity: 0;
+    }
+}
+
+@-moz-keyframes depthoutreverse {
+    from {
+        -moz-transform: scale(1);
+        opacity: 1;
+    }
+    to {
+        -moz-transform: scale(.9);
+        opacity: 0;
+    }
+}

diff --git a/src/widgets/common/js/jquery.mobile.tizen.configure.js b/src/widgets/common/js/jquery.mobile.tizen.configure.js
new file mode 100644 (file)
index 0000000..33a45c7
--- /dev/null
+++ b/src/widgets/common/js/jquery.mobile.tizen.configure.js
@@ -0,0 +1,11 @@
+/*
+ * set TIZEN specific configures
+ */
+
+( function( $, window, undefined ) {
+
+       /* depth transition */
+       $.mobile.transitionHandlers.depth = $.mobile.transitionHandlers.simultaneous;
+       $.mobile.transitionFallbacks.depth = "fade";
+
+})( jQuery, this );