Angularjs ngAnimate不在当前页面之外工作

我对angularjs中的ngAnimate有些问题。 如果我在当前页面上，它可以正常工作，但是如果我重新加载页面，然后转到另一个页面，则动画无法工作。 我将css动画与js动画一起使用

简单代码

<style>
    .test-animate.ng-enter,
    .test-animate.ng-leave 
    {
        transition: all ease-in-out .5s;
    }
</style>

<div style="position: relative;height: 70vh">
    <md-card ng-repeat="model in Models track by $index" ng-style="{'width':{true: '100%'}[$index == 0]}" ng-class="{true: 'test-animate'}[$index > 0]" style="position: absolute;top: 0;width: 0;height: 100%;">
        ...
    </md-card>
</div>

angular.module('app', ['ngAnimate']).animation('.test-animate', ['$animateCss', ($animateCss) =>
{
    return {
        enter: (el) =>
        {
            const index = parseInt($(el).data('index'));
            return $animateCss(el, {
                event: 'enter',
                structural: true,
                to: {
                    'right': 0,
                    'width': `calc(100% - ${index * 80}px`,
                    'max-width': `calc(100% - ${index * 80}px`
                }
            });
        },
        leave: (el) =>
        {
            return $animateCss(el, {
                event: 'leave',
                structural: true,
                from: {
                    'max-width': $(el).css('max-width')
                },
                to: {
                    'max-width': 0
                }
            });
        }
    }
}])