我有以下css类，用于在路线更改开始时左右滑动我的视图。这些都适用于大多数浏览器，手机等。到目前为止...在ios 9下，动画效果不佳，不再从左向右滑动，但视图在滑动时从小尺寸增大到全尺寸效果相当不愉快。欢迎任何帮助！
CSS
.slide-left.ng-enter,
.slide-left.ng-leave,
.slide-right.ng-enter,
.slide-right.ng-leave {
position: absolute;
top: 58px; right: 0; bottom: 0; left: 0;
background: inherit;
-ms-transition: 0.35s ease-in-out;
-webkit-transition: 0.35s ease-in-out;
-moz-transition: 0.35s ease-in-out;
-o-transition: 0.35s ease-in-out;
transition: 0.35s ease-in-out;
}
.slide-left.ng-enter {
z-index: 101;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
-moz-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.slide-left.ng-enter.ng-enter-active {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.slide-left.ng-leave {
z-index: 100;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.slide-left.ng-leave.ng-leave-active {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide-right.ng-enter {
z-index: 100;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide-right.ng-enter.ng-enter-active {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.slide-right.ng-leave {
z-index: 101;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.slide-right.ng-leave.ng-leave-active {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-o-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
JS
$rootScope.$on('$routeChangeStart', function() {
//event button to move backward
$rootScope.back = function() {
$rootScope.slideClass = 'slide-right';
};
//event button item list to move forward
$rootScope.next = function() {
$rootScope.slideClass = 'slide-left';
};
$rootScope.stay = function() {
$rootScope.slideClass = 'slide-none';
};
});
MARKUP
<div data-ng-class="slideClass" autoscroll="true" data-ng-view></div>
更新
我已经从类似的问题和迭代在[{3}}
上发布的后续答案中得到了部分答案。我尝试了与此问题上发布的解决方案类似的解决方案。即。使用overflow：隐藏在父元素上，似乎解决了动画问题。我在模拟器上进行测试，事情似乎已经结束了。然而，这打破了许多其他事情，即滚动....
引用迭戈＆＃34;这似乎是嵌套图层组合和视口大小的错误。添加溢出：隐藏在父层中似乎解决了问题。从性能的角度来看，一切似乎都表现相同（相同的布局，颜料，合成层）＆＃34;
这是正确的方向，但还不是正确答案。
答案 0 :(得分：11)
有一个关于此here
的帖子TLDR：您需要将元视口的比例值设置为1.0001
<meta name="viewport" content="initial-scale=1.0001, minimum-scale=1.0001, maximum-scale=1.0001, user-scalable=no"/>
如果只定位IOS设备，那就更好了：
if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
document.querySelector('meta[name=viewport]').setAttribute(
'content',
'initial-scale=1.0001, minimum-scale=1.0001, maximum-scale=1.0001, user-scalable=no'
);
}
答案 1 :(得分：0)
由于某种原因，我发现{9}在iOS 9中有问题...
当我将变换从WindowController更改为translateX时，事情又开始变得清醒了。
试试吧。