@H_403_0@AngularJS 1.2 通过引入基于纯CSS class的切换和动画,在一个单页面应用创建页面到页面的切换变得更加的容易。只需要使用一个ng-view,让我们来看一下,一个引入众多的不同切换的可伸缩方法,以及指定的每个页面如何切入和切出。
@H_4030@演示: http://embed.plnkr.co/PqhvmW/preview
@H403_0@首先,标记:
@H_403_0@AngularJS 1.2 通过引入基于纯CSS class的切换和动画,在一个单页面应用创建页面到页面的切换变得更加的容易。只需要使用一个ng-view,让我们来看一下,一个引入众多的不同切换的可伸缩方法,以及指定的每个页面如何切入和切出。
那样也可以工作,但是我们需要在ng-view 硬编码指定切换一个class 。以此代替,让我们在 $rootScope 上创建一个 'go' 方法,可以让我们指定一个路径和一个像这样的切换:
else { // Use the specified animation
$rootScope.pageAnimationClass = pageAnimationClass;
}
if (path === 'back') { // Allow a 'back' keyword to go to prevIoUs page
$window.history.back();
}
else { // Go to the specified path
$location.path(path);
}
};
.slideLeft.ng-enter.ng-enter-active {
transition-property: all;
transform: translate3d(0,0);
}
.slideLeft.ng-leave {
transition-property: all;
transform: translate3d(0,0);
}
.slideLeft.ng-leave.ng-leave-active {
transition-property: all;
transform: translate3d(-100%,0);
}