Merge pull request mozilla-b2g#7499 from borjasalguero/bug_transition…

…_sms Bug 828552 - [SMS] Fix transitions without flickering r=vingtetun
dscravag · Jan 10, 2013 · 86549ba · 86549ba
2 parents c155eb7 + a3a84a0
commit 86549ba
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 5 deletions.
diff --git a/apps/sms/js/sms.js b/apps/sms/js/sms.js
@@ -70,9 +70,18 @@ var MessageManager = {
 
   slide: function mm_slide(callback) {
     var mainWrapper = document.getElementById('main-wrapper');
-    mainWrapper.classList.toggle('to-left');
-    mainWrapper.addEventListener('transitionend', function slideTransition() {
-      mainWrapper.removeEventListener('transitionend', slideTransition);
+    if (!mainWrapper.classList.contains('to-left')) {
+      mainWrapper.classList.remove('to-right');
+      mainWrapper.classList.add('to-left');
+    } else {
+      mainWrapper.classList.remove('to-left');
+      mainWrapper.classList.add('to-right');
+
+    }
+    mainWrapper.addEventListener('animationend', function slideTransition() {
+      mainWrapper.removeEventListener('animationend', slideTransition);
+      mainWrapper.classList.toggle('to-left-fixed');
+
       if (callback) {
         callback();
       }

diff --git a/apps/sms/style/sms.css b/apps/sms/style/sms.css
@@ -178,21 +178,81 @@ form[role="dialog"][data-type="edit"] header menu[type="toolbar"] button {
   float: left;
   width: 100%;
   height: 100%;
-  transition: transform 0.4s ease;
+}
+
+@keyframes slideLeftPrimary {
+  from {
+    transform: translateX(-1%);
+  }
+
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes slideLeftSecondary {
+  from {
+    transform: translateX(99%);
+  }
+
+  to {
+    transform: translateX(0%);
+  }
+}
+
+@keyframes slideRightSecondary {
+  from {
+    transform: translateX(1%);
+  }
+
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes slideRightPrimary {
+  from {
+    transform: translateX(-99%);
+  }
+
+  to {
+    transform: translateX(0%);
+  }
 }
 
 .panel:nth-child(2) {
   transform: translateX(100%);
 }
 
 .to-left > .panel:first-child {
-  transform: translateX(-100%);
+  animation-duration: .3s;
+  animation-name: slideLeftPrimary;
 }
 
 .to-left > .panel:nth-child(2) {
+  animation-duration: .3s;
+  animation-name: slideLeftSecondary;
+}
+
+.to-left-fixed > .panel:first-child {
+  transform: translateX(-100%);
+}
+
+.to-left-fixed > .panel:nth-child(2) {
   transform: translateX(0);
 }
 
+.to-right > .panel:first-child {
+  animation-duration: .3s;
+  animation-name: slideRightPrimary;
+}
+
+.to-right > .panel:nth-child(2) {
+  animation-duration: .3s;
+  animation-name: slideRightSecondary;
+}
+
+
 #thread-list,#thread-messages {
   z-index: 10;
   background: white;