0

我想为特定的状态变化制作不同的动画。我基于此： 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有默认动画。

4

1 回答 1

0

我用这个实现了它： 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'
                });
            }
        };
    }]);
于 2017-09-27T20:40:38.990 回答