Angular animation for specific states

Question

i want to make different animations for specific state change. I'm based on this: https://scotch.io/tutorials/animating-angularjs-apps-ngview and it works properly, but i want something like this:

state is changed from A to B - slide views from left to right
state is changed from B to C - slide views from right to left
state is changed from C to A - slide views from up to down
otherwise - slide views from down to up

At the moment i have something like this - all views moves from right to left. When i click on button "Back" in my app then to .main-app is added class .back but then i have properly animation (left to right) only on .ng-leave element and .ng-enter have same animation as always (right to left)

$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; }

I tried something like this:

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

But with this script still only .ng-leave element works like i want, .ng-enter have default animation.

score 0 · Answer 1 · answered Sep 27 '17 at 20:40

I achieved it with this: https://docs.angularjs.org/api/ngAnimate/service/$animateCss

I save previous state with this code

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

And this is code which decide what animation should be used

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'
                });
            }
        };
    }]);

Angular animation for specific states

1 Answers1