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工作

回答

相关问题