我使用Angular ui-router和ng-animate作为混合移动应用程序.所以我想在屏幕(或状态)之间使用移动标准转换.深入了解应用程序,向左滑动.返回(使用后退按钮)：向右滑动.没有什么花哨的东西和正常的ng-route一起工作.但是,这也适用于ui-router.
实际上,左侧滑动工作正常,返回时会出现问题.它在“原始”div上应用类左滑动,但在副本或ng-animate div上应用右滑动.这导致动画“交叉”,而不是很好.
实际上,左侧滑动工作正常,返回时会出现问题.它在“原始”div上应用类左滑动,但在副本或ng-animate div上应用右滑动.这导致动画“交叉”,而不是很好.
那些例子在我的案例中没有用.
index.html的：
<div class="container">
<div ui-view class="view"></div>
</div>
在main.css中：
.slide-left.ng-enter,.slide-left.ng-leave,.slide-right.ng-enter,.slide-right.ng-leave {
position: absolute;
top: 0px; right: 0; bottom: 0; left: 0;
overflow-x: hidden;
background: inherit;
-ms-transition: 5.5s ease-in-out;
-webkit-transition: 5.5s ease-in-out;
transition: 5.5s ease-in-out;
}
.slide-left.ng-enter {
z-index: 100;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.slide-left.ng-enter.ng-enter-active {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slide-left.ng-leave {
z-index: 101;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slide-left.ng-leave.ng-leave-active {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide-right.ng-enter {
z-index: 101;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide-right.ng-enter.ng-enter-active {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slide-right.ng-leave {
z-index: 100;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slide-right.ng-leave.ng-leave-active {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
在我的routes.js中：
我在抽象视图中设置了ng-class =“slide”.
$stateProvider
.state('enrollments',{
abstract: true,url: '/tutorProcessEnrollments',template: '<div class="scroller" ui-view ng-class="slide" ></div>'
})
.state('enrollments.list',{
url: '',templateUrl: 'views/tutorProcessEnrollments.list.html',controller: 'TutorEnrollmentsCtrl'
})
.state('enrollments.enrollment',{
url: '/:enrollment_id',templateUrl: 'views/tutorProcessEnrollments.enrollment.html',controller: 'TutorEnrollmentCtrl'
})
在App.js中
.controller('MainCtrl',['$scope','$rootScope','$window','$location','$state',function ($scope,$rootScope,$window,$location,$state) {
$scope.slide = 'slide-left';
// Implement own state.goTo functionality,to set the slide-left default on every menu action.
$rootScope.goTo = function (route,param) {
$scope.slide = 'slide-left';
$state.go(route,param);
};
// Function for going back in the history. The back button is hidden on items where no sub items/states\ are available.
$rootScope.back = function () {
if ($scope.slide === 'slide-left') {
$scope.slide = 'slide-right';
}
$window.history.back();
};
}]);
如您所见,我使用$window.history.back()导航回上一个屏幕/状态,如果当前方向被保留,我将其设置为右,否则,我什么都不做.此主控制器添加在Body标签中.
这是在enrollments.enrollment状态下发生的情况,并返回到enrollments.list状态.
<div class="scroller ng-scope slide-left ng-animate ng-enter ng-enter-active" ui-view="" ng-class="slide" style=""><div ng-model="enrollment" class="ng-scope ng-pristine ng-valid"> <div class="scroller ng-scope slide-right ng-animate ng-enter ng-enter-active" ui-view="" ng-class="slide" style=""><div ng-model="enrollment" class="ng-scope ng-pristine ng-valid">
ui-router团队的ng-class不同步问题是solved,但显然我做错了.
我也不喜欢我当前的解决方法来获取每次点击以在应用程序中更深入地导航.
那么：我如何使用向后/向右滑动和后退按钮并使类保持同步？
我尽我所能
原文链接：https://www.f2er.com/angularjs/141758.htmlvar myapp = angular.module('myApp',["ui.router","ngAnimate",'hmTouchEvents','ngSanitize'])
myapp.config(function($stateProvider,$urlRouterProvider,$animateProvider){
$animateProvider.classNameFilter(/ani-/);
$stateProvider
.state('anon',{
template:'<ui-view class="ani-ui-view" ng-class="abstractView"/>',abstract:true
})
.state("anon.foo",{
url: "/foo",templateUrl : '/views/statechange/resources/partials/foo.html',controller : 'fooCtl'
})
.state("anon.bar",{
url: "/bar",templateUrl : '/views/statechange/resources/partials/bar.html',controller : 'barCtl'
});
$urlRouterProvider.otherwise("/foo");
})
.run(function($rootScope){
$rootScope.$on("$stateChangeStart",function(event,currRoute,prevRoute,rejection) {
});
})
.animation('.fade-in',function($timeout){
return {
enter : function(element,done){
element.css({
'opacity':0,transition:'all 300ms'
});
$timeout(function(){
element.css({
'opacity':1
});
},0)
}
}
})
.animation('.show-bar',function($timeout) {
return {
enter : function(element,done) {
element.css({
transition:'all 300ms',transform:'translate3d(100%,0)'
});
$timeout(function(){
element.css({
transform:'translate3d(0,0)'
});
},0);
},leave : function(element,transform:'translate3d(0,0)'
});
$timeout(function(){
element.css({
transform:'translate3d(100%,0);
},// you can also capture these animation events
addClass : function(element,className,done) {},removeClass : function(element,done) {}
}
})
.animation('.slide-foo',transform:'translate3d(-100%,done) {}
}
})
.controller('mainCtl',[
'$scope',function($scope,$state,$window){
$rootScope.abstractView = 'fade-in';
console.log('mainCtl');
}
])
.controller('fooCtl','$timeout',$timeout,$rootScope){
$scope.changeState = function(_state){
$rootScope.abstractView = 'show-bar';
$state.go('anon.bar');
}
$scope.tip="I am foo";
}
])
.controller('barCtl','$stateParams',$stateParams,$window){
$timeout(function(){
$scope.barshow = true;
});
$scope.tip="I am bar";
$scope.goBack = function($event){
$rootScope.abstractView = 'show-bar';
$window.history.back();
}
}
]);
索引HTML
<body ng-controller="mainCtl">
<div class="ui-view-container">
<div ui-view></div>
</div>
</body>
foo html
<section ng-controller="fooCtl">
<div class="well">
{{tip}}
<div class="text-right">
<button class="btn btn-default" hm-tap="changeState('anon.bar')">to bar -></button>
</div>
</div>
吧html
<section ng-controller="barCtl">
<div class="well">
<div class="text-left">
<button class="btn btn-info" hm-tap="goBack($event);"><- back</button>
</div>
{{tip}}
</div>
一些css
.ui-view-container {
position:relative;
}
.ani-ui-view{
position: absolute;
left: 0;
top: 0;
width:100%;
}
我希望它可以帮到你
