mozilla css轉換屬性dosn'st工作

我正在建立一個簡單的轉換嘲笑下滑效果覆蓋。我在Chrome和Safari中工作正常，但它在Firefox中不起作用，我不知道爲什麼。mozilla css轉換屬性dosn'st工作

這裏是我的CSS：

.overlay { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    background: rgba($off-canvas-bg, 0.95); 
    z-index: 99; 
    overflow: auto; 
} 

.overlay-slidedown { 
visibility: hidden; 
-webkit-transform: translateY(-100%); 
-moz-transform: translateY(-100%); 
transform: translateY(-100%); 
-webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s; 
-moz-transition: -moz-transform 0.4s ease-in-out, visibility 0s 0.4s; 
transition: transform 0.4s ease-in-out, visibility 0s 0.4s; 
} 

.overlay-slidedown.open { 
visibility: visible; 
-webkit-transform: translateY(0%); 
-moz-transform: translateY(0%); 
transform: translateY(0%); 
-webkit-transition: -webkit-transform 0.4s ease-in-out; 
-moz-transition: -moz-transform 0.4s ease-in-out; 
transition: transform 0.4s ease-in-out; 
}

和HTML：

<div class="overlay overlay-slidedown"> 
    </div>

我加入公開課使用javascript：

toggleMenu: function () { 
      var overlay = this.$('.overlay'); 

      if(overlay && overlay.hasClass('open')) { 
      overlay.removeClass('open') 
      } 
      else if(overlay){ 
      overlay.addClass('open') 
      } 

     },

來源

2014-09-11 lipenco

可能是因爲這裏輸入錯誤'-moz-transition：-webkit-transform 0.4s ease-in-out;'爲transition指定的屬性是'-webkit-transform'。 – Harry 2014-09-11 02:54:51

嘗試增加這.overlay

transform-style: preserve-3d;

當FF變換不正確時，經常會發生這種情況，因此缺少相應的元素。 Webkit構建似乎不需要這樣來建立所需的堆疊上下文，但在這種情況下，Chrome/Safari在相鄰同胞元素上使用z-index會受到有趣的影響。

來源

2014-09-13 19:57:10 thisiate

mozilla css轉換屬性dosn'st工作

回答

相關問題