特定状态的角度动画

Question

我想为特定的状态变化制作不同的动画。 我基于此： https://scotch.io/tutorials/animating-angularjs-apps-ngview 它工作正常，但我想要这样的东西：

• 状态从 A 更改为 B - 从左到右滑动视图
• 状态从 B 更改为 C - 从右向左滑动视图
• 状态从 C 更改为 A - 幻灯片视图从上到下
• 否则 - 从下向上滑动视图

目前我有这样的事情 - 所有视图都从右到左移动。当我在我的应用程序中单击“返回”按钮然后到.main-app 被添加类.back 但是我只有在.ng-leave 元素和.ng-enter 有正确的动画（从左到右）和往常一样有相同的动画（右向左）

$animateTime: .5s;
.main-app.ng-enter { position: absolute; top: 0; left: 0; animation: slideInRight $animateTime both ease-in; }
.main-app.ng-leave { position: absolute; top: 0; left: 0; animation: slideOutLeft $animateTime both ease-in; }

.main-app.ng-enter.back { position: absolute; top: 0; left: 0; animation: slideInLeft $animateTime both ease-in; }
.main-app.ng-leave.back { position: absolute; top: 0; left: 0; animation: slideOutRight $animateTime both ease-in; }

我尝试过这样的事情：

$rootScope.$on('$stateChangeSuccess', function(event, to, toParams, from, fromParams) {
    if(from.name == 'A' && to.name == 'B') {
        $('.main-app').addClass('animation-from-top-to-bottom');
    }
});

但是使用这个脚本仍然只有.ng-leave 元素可以像我想要的那样工作，.ng-enter 有默认动画。

Answer 1

我通过以下方式实现了它： https://docs.angularjs.org/api/ngAnimate/service/$animateCss

我用这段代码保存以前的状态

$rootScope.$on('$stateChangeSuccess', function(event, to, toParams, from, fromParams) {
    $rootScope.$previousState.state = from;
    $rootScope.$previousState.stateParams = fromParams;
});

这是决定应该使用什么动画的代码

angular.module('app').animation('.main-app', ['$animateCss', '$rootScope', '$state',
    function ($animateCss, $rootScope, $state) {
        var duration = '.25s';

        return {
            enter: function (element, doneFn) {
                var from = $rootScope.$previousState.state;
                var to = $state.current;

                var animationName;

                if (from.name === 'A' && to.name === 'B') {
                    animationName = 'fadeIn';
                } else {
                    animationName = 'zoomIn';
                }

                return $animateCss(element, {
                    keyframeStyle: duration + ' ' + animationName + ' linear'
                });
            },
            leave: function (element, doneFn) {
                var from = $rootScope.$previousState.state;
                var to = $state.current;

                var animationName;

                if (from.name === 'A' && to.name === 'B') {
                    animationName = 'fadeOut';
                } else {
                    animationName = 'zoomOut';
                }

                return $animateCss(element, {
                    keyframeStyle: duration + ' ' + animationName + ' linear'
                });
            }
        };
    }]);