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

Question

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

当用户单击链接时，我需要先轻轻淡出当前 View ，然后再将其导航到另一个 View 。

我已经为此编写了指令，这是它的链接函数:

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 链接，您也可以尝试一下 -