Mozilla CSS转换属性不起作用答案

【问题标题】：mozilla css transform property dosn't workMozilla CSS转换属性不起作用
【发布时间】：2014-11-04 19:12:02
【问题描述】：

我正在构建一个带有简单变换模拟滑下效果的叠加层。我在 Chrome 和 Safari 中运行良好，但在 Firefox 中无法运行，我不知道为什么。

这是我的 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')
          }

        },

【问题讨论】：

可能是因为这里的拼写错误-moz-transition: -webkit-transform 0.4s ease-in-out;为transition指定的属性是-webkit-transform。

标签： javascript css css-transitions transitions

【解决方案1】：

尝试将此添加到.overlay

transform-style: preserve-3d;

当 FF 转换不正确时，通常会在适当的元素中丢失这一点。 Webkit 构建似乎不需要它来建立所需的堆叠上下文，但在这种情况下，Chrome/Safari 对相邻兄弟元素的 z-index 会产生有趣的影响。

【讨论】：