在ng-view动画克隆上设置类

时间:2015-05-21 00:21:13

标签: angularjs ng-animate ng-view

我通过在$ 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克隆的类。实现这一目标的最佳方法是什么?

0 个答案:

没有答案