У меня есть следующие классы css, которые я использую для перемещения моего ng-view влево и вправо при начале изменения маршрута. Все они хорошо работают на большинстве браузеров, телефонов и т.д. До сих пор... Под 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>
ОБНОВЛЕНИЕ
Я пришел к частичному ответу из аналогичного вопроса и последующему ответу, опубликованному Diego on iOS 9 для мобильного сафари имеет мигающую ошибку с преобразованием scale3d и translate3d
Я попробовал аналогичное решение, подобное тому, которое было опубликовано по этому вопросу. то есть. использование переполнения: скрыто на родительском элементе, который, похоже, решил проблему анимации. Я тестирую симулятор, и все, кажется, проверяется. Однако это нарушает ряд других вещей, а именно прокрутку....
Quoting Diego "Кажется, это ошибка с вложенным составом слоев и размером окна просмотра. Добавление переполнения: скрытое в родительском слое, похоже, решает проблему. С точки зрения производительности все, кажется, ведет себя одинаково (идентичные макеты, краски, слои композиции)
Это происходит в правильном направлении, но еще не правильный ответ.