Permalink
Browse files

modify iui to use webkit css animations instead of hand-rolled js ones

  • Loading branch information...
1 parent 5b00731 commit e8d5a4e8a9129abc9b756eec02fbcbdbe1f21b3f @defunkt committed Nov 11, 2008
Showing with 18 additions and 39 deletions.
  1. +8 −1 iui/iui.css
  2. +10 −38 iui/iui.js
View
@@ -24,7 +24,14 @@ body[orient="landscape"] > *:not(.toolbar) {
min-height: 268px;
}
-body > *[selected="true"] {
+ body > *[selected="true"] {
+ display: block;
+ -webkit-transition-property: left;
+ -webkit-transition-duration: .5s;
+}
+
+body > *:not([selected="true"]) {
+ left: 100% !important;
display: block;
}
View
@@ -6,9 +6,6 @@
(function() {
-var slideSpeed = 20;
-var slideInterval = 0;
-
var currentPage = null;
var currentDialog = null;
var currentWidth = 0;
@@ -326,50 +323,25 @@ function updatePage(page, fromPage)
}
else
backButton.style.display = "none";
- }
+ }
}
function slidePages(fromPage, toPage, backwards)
-{
+{
var axis = (backwards ? fromPage : toPage).getAttribute("axis");
- if (axis == "y")
+
+ if (axis == "y") {
(backwards ? fromPage : toPage).style.top = "100%";
- else
- toPage.style.left = "100%";
+ } else {
+ fromPage.style.left = (backwards ? "" : "-") + "100%";
+ toPage.style.left = "0%";
+ }
toPage.setAttribute("selected", "true");
scrollTo(0, 1);
clearInterval(checkTimer);
-
- var percent = 100;
- slide();
- var timer = setInterval(slide, slideInterval);
-
- function slide()
- {
- percent -= slideSpeed;
- if (percent <= 0)
- {
- percent = 0;
- if (!hasClass(toPage, "dialog"))
- fromPage.removeAttribute("selected");
- clearInterval(timer);
- checkTimer = setInterval(checkOrientAndLocation, 300);
- setTimeout(updatePage, 0, toPage, fromPage);
- }
-
- if (axis == "y")
- {
- backwards
- ? fromPage.style.top = (100-percent) + "%"
- : toPage.style.top = percent + "%";
- }
- else
- {
- fromPage.style.left = (backwards ? (100-percent) : (percent-100)) + "%";
- toPage.style.left = (backwards ? -percent : percent) + "%";
- }
- }
+ checkTimer = setInterval(checkOrientAndLocation, 0);
+ setTimeout(updatePage, 0, toPage, fromPage);
}
function preloadImages()

1 comment on commit e8d5a4e

@sunglee
sunglee commented on e8d5a4e Dec 4, 2008

This code is not working as of 12/04/2008.
Thanks for your try though…

Please sign in to comment.