跨浏览器转换和转换问题

Cross-browser transition and transform issues

本文关键字：转换 问题 浏览器      更新时间：2023-09-26

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

我有一个移动导航显示，只要你的浏览器足够小(我相信在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%);
}

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

如下图所示:

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

是有问题的。如所见，常规转换属性有一个问题。这个问题可以在转换的transform属性前面看到一个破折号。去掉这个，问题就解决了。

相关文章：