Bug 843742 - Add a slide in animation for flyout sidebars. r=mbrubeck r=fryn ui-r=fryn

2013-02-26 13:52:47 -08:00 · 2013-02-26 13:52:47 -08:00 · 69efae8a6e
--- a/browser/metro/base/content/bindings/flyoutpanel.xml
+++ b/browser/metro/base/content/bindings/flyoutpanel.xml
@ -48,19 +48,36 @@
        </getter>
      </property>
      
-      <method name="hide">
+      <method name="_onAfterSlideOut">
        <body>
          <![CDATA[
            this.removeAttribute("visible");
+            this.removeEventListener("transitionend", this._onAfterSlideOut);
            DialogUI.popPopup(this);
          ]]>
        </body>
      </method>

+      <method name="hide">
+        <body>
+          <![CDATA[
+            if (!this.isVisible)
+              return;
+
+            this.addEventListener("transitionend", this._onAfterSlideOut);
+            this.classList.remove("flyoutpanel-slide-in");
+          ]]>
+        </body>
+      </method>
+
      <method name="show">
        <body>
          <![CDATA[
+            if (this.isVisible)
+              return;
+
            this.setAttribute("visible", "true");
+            this.classList.add("flyoutpanel-slide-in");
            DialogUI.pushPopup(this, this);
          ]]>
        </body>
--- a/browser/metro/theme/flyoutpanel.css
+++ b/browser/metro/theme/flyoutpanel.css
@ -10,7 +10,9 @@ flyoutpanel {
  -moz-border-start-style: solid;
  visibility: collapse;
  position: fixed;
-  transition: transform 0.2s ease-out;
+  /* bezier function and duration taken from winJS showPanel method */
+  transition: transform 550ms cubic-bezier(0.1, 0.9, 0.2, 1);
+  transform: translateX(100%);
  font-size: 11pt;
  right: 0;
 }
@ -18,6 +20,11 @@ flyoutpanel {
 flyoutpanel:-moz-dir(rtl) {
  left: 0;
  right: auto;
+  transform: translateX(-100%);
+}
+
+.flyoutpanel-slide-in {
+  transform: translateX(0);
 }

 flyoutpanel[visible] {