Question

我在here使用了bootstrap的画布外布局。它的核心是right css属性的动画效果，它将画布向左移动：

.row-offcanvas {
   right: 0;
   position: relative;
   transition: all .25s ease-out;
}

.row-offcanvas.active {
   right: 50%;
}

从PC浏览器查看时，过渡非常顺利。但是，从Android的Chrome浏览器中看，过渡是不稳定的。如果您从Android设备（或可能从任何移动设备）打开the link，您将看到效果。
我该怎么做才能让它在移动浏览器上流畅运行？

Answer 1

解决方案是使用transform:translate代替right。

.row-offcanvas-navbar {
  position: relative;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: 300ms ease all;
  -o-transition: 300ms ease all;
  transition: 300ms ease all;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}
.row-offcanvas-navbar.right.active {
  -webkit-transform: translate(-250px, 0);
  -ms-transform: translate(-250px, 0);
  -o-transform: translate(-250px, 0);
  transform: translate(-250px, 0);
  -webkit-transform: translate3d(-250px, 0, 0);
  transform: translate3d(-250px, 0, 0);
}

从移动设备上的非画布引导程序布局中删除急动效果

1 个答案: