Question

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

我有一个移动导航，只要你的浏览器足够小（我认为宽度低于940px），它就可以在Chrome和其他webkit浏览器上正常工作，但在Firefox和IE中，转换不起作用，什么也不做改变我想要的方式。我不确定为什么会这样，可以使用帮助。

以下是指向该网站的链接：http://teamreest.com/

编辑：我使用的是特定的供应商前缀，但它仍然不起作用。

更具体地涉及此：

.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;

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

跨浏览器转换和转换问题

1 个答案: