Javascript 如何在ui路由器$stateChangeStart中等待动画结束？

我在项目中使用AngularJs，并在其中使用ui路由器

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

我已经为此编写了指令，下面是它的链接函数：

link: function($scope, element) {

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

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

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

                });

        }

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

我既没有找到使jQuery动画同步的解决方案，也没有挂起ui路由器转换，然后在动画回调中继续

---

请告知。

ui路由器内置了对动画的支持，您使用自定义指令有什么原因吗

---

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

是的，我需要对动画有更多的控制，这是内置动画无法实现的。您能否使用内置动画设置一个“虚拟”动画，时间相同，然后同时运行您想要做的事情