我通过在$ routeChangeStart事件上设置类来为我的ngView设置动画。它按预期工作,下一页加载新类+ ng-animate ng-enter ng-enter-active,前一页克隆具有旧类+ ng-animate ng-leave ng-leave-active,如此处所示:
<div ng-view class="page1transition ng-animate ng-leave ng-leave-active" data-ng-animate="2">
<div ng-view class="page2transition ng-animate ng-enter ng-enter-active" data-ng-animate="2">
我想要做的是在设置新版本的同时设置上一页的类,因此转换将匹配如下:
<div ng-view class="page2transition ng-animate ng-leave ng-leave-active" data-ng-animate="2">
<div ng-view class="page2transition ng-animate ng-enter ng-enter-active" data-ng-animate="2">
我在路线中设置了动画。
$routeProvider
.when('/statuses/',
{
controller: 'StatusesController',
templateUrl: 'views/statuses/index.html',
action: 'index',
title: 'Statuses',
animation: 'page1transition',
leftMenuButton: true
})
.when('/statuses/new',
{
controller: 'StatusesController',
templateUrl: 'views/statuses/form.html',
action: 'new',
animation: 'page3transition',
title: 'Create Status'
})
.when('/statuses/:statusId',
{
controller: 'StatusesController',
templateUrl: 'views/statuses/show.html',
action: 'show',
animation: 'page21transition',
title: 'Status'
})
并将它们应用于$ routeChangeStart事件
$rootScope.$on('$routeChangeStart', function(event, next, current)
{
if (current && current.$$route.animation)
{
$rootScope.pageClass = next.$$route.animation;
}
});
似乎ng-animate适用于任何动画属于进入和退出的页面,但是我希望这两个动画都基于加载的下一页。 page1transition离开动画与page2transition输入动画不匹配,但page2transition输入动画与page2transition离开动画匹配。
基本上我想控制ng-animate同时创建的ng-view和ng-view克隆的类。实现这一目标的最佳方法是什么?