Question

我在我的项目中使用AngularJs，在其中使用ui-router。

我需要轻轻淡出当前视图，然后在点击链接时将用户导航到另一个视图。

我已经为此编写了指令，这里是它的链接功能：

link: function($scope, element) {

            $rootScope.$on('$stateChangeStart',
                function (event, toState, toParams, fromState, fromParams) {

                var $element = $('#fw');

                $element.animate({
                    opacity: 0
                }, 4000, function () {

                });

        }

但当然转换会立即执行，而不会等待动画结束。

我既没有找到使jQuery动画同步的解决方案，也没有暂停ui-router转换，然后在动画回调中继续它。

请告知。

Answer 1

ui-router内置了对动画的支持，你有什么理由使用自定义指令吗？

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-animate-ui-view-with-ng-animate

该页面上有一个plunkr链接，你也可以试验 -

如何在ui-router $ stateChangeStart中等待动画结束？

1 个答案: