Question

我在this tutorial之后正在制作纯css非画布菜单。

代码很简单，当选中nav-trigger复选框时，site-wrap div应该向右转换。因此导航div可以出现在下面。

.navigation {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.site-wrap {
  position: relative;
  top: 0;
  left: 0;
  z-index: 10;
}

.nav-trigger:checked ~ .site-wrap {
  left: 100px;
}

.nav-trigger + label, .site-wrap {
 -webkit-transition: left 0.2s ease;
  transition: left 0.2s ease;
}

它在桌面浏览器上完美运行（在Firefox和Chromium中测试）。但是在移动设备上，转换表现得非常奇怪：包装器按比例缩小而不是翻译。

桌面浏览器和移动设备之间存在差异，它看起来像是一个视口问题。我正在使用这个基本元标记：

<meta name="viewport" content="width=device-width">

我不知道出了什么问题。这个MDN page告诉我CSS3过渡仍然在“工作草案”上。但我认为我想要的只是非常简单，它应该是有效的。

Answer 1

我通过改变CSS3方法处理它。我用了

transform translate3d(100px,0,0)

而不是在两个位置之间进行转换。它适用于移动设备，但过渡更加残酷。

CSS3过渡在移动设备上表现不同

1 个答案: