javascript - 跨浏览器转换和转换问题

Question

我在构建新网站时遇到问题。

我有一个移动导航，只要你的浏览器足够小(我相信宽度在 940px 以下)就会显示，它在 Chrome 和其他 webkit 浏览器上工作正常，但在 Firefox 和 IE 中，过渡不起作用，没有任何改变我想要的方式。我不太确定这是为什么，需要帮助。

这是该站点的链接:http://teamreest.com/

编辑:我正在使用特定的 vendor 前缀，但它仍然不起作用。

更具体地与此相关:

.overlay{
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  background: $main-color;
  overflow: auto;
  z-index:100;
  font-size:50px;
  font-weight:300;
  min-height:400px;

  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  -ms-transition: -ms-transform 0.4s;
  transition: -transform 0.4s;

  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
}

.overlay.show {
  opacity:1;

  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
}

还有这个:

.container{
  height:100%;
  opacity: 1;

  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
  -moz-transition: -moz-transform 0.4s, opacity 0.4s;
  -ms-transition: -ms-transform 0.4s, opacity 0.4s;
  transition: -transform 0.4s, opacity 0.4s;
}

.container.show {
  opacity: 0.5;

  -webkit-transform: translateX(30%);
  -moz-transform: translateX(30%);
  -ms-transform: translateX(30%);
  transform: translateX(30%);
}

Answer 1

我在我的代码中发现了这个问题。

这里看到的过渡:

  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  -ms-transition: -ms-transform 0.4s;
  transition: -transform 0.4s;

在这里:

  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
  -moz-transition: -moz-transform 0.4s, opacity 0.4s;
  -ms-transition: -ms-transform 0.4s, opacity 0.4s;
  transition: -transform 0.4s, opacity 0.4s;

有问题。正如所见，常规过渡属性存在问题。 这个问题可以看作是在转换的转换属性前面有一个破折号。通过删除它，问题就解决了。