Angularjs 嵌套ui视图动画

我正在努力使用ui路由器在两个ui视图元素上同时创建单独的动画（或任何动画）

我的基本网站布局是：

• main.html（有一个淡入的ui视图）
  • 位于“main”中的customerMain.html

main.html

<div id="work-container">
    <div class="menu">

        <!-- some ul/li stuff -->

    </div>
    <div class="content">
        <div ui-view class="view-animate-main-container"></div>
    </div>
</div>

<div id="customer-work-container">
    <div class='menu'>
        <div ui-view='menu' class='view-animate-main-container'></div>
    </div>
    <div class="content">
        <div ui-view='content' class="view-animate-sub-container"></div>
    </div>
</div>

简言之，我尝试在两个内容视图上执行不同的动画，但我尝试的一切似乎都没有效果，即使我删除了所有父动画，仍然没有动画应用于视图。我不完全确定是否添加了ng enter，它太快了，看不见

我最初认为发生的是淡入动画被应用到主ui视图，然后在加载子ui视图时也会运行，因此您看不到动画，但是，删除父动画和延迟子动画，仍然没有任何效果

---

欢迎任何指点

根据我的经验，在父视图至少更改一次之后，ngAnimate无法处理ui路由器的子视图（当路由器初始匹配加载父视图及其子视图时，它在初始页面加载时工作。更奇怪的是，转换在第二次尝试时工作，而在第一次尝试切换子视图时，它完全跳过应该存在的转换）。我猜原因可能是ngAnimate无法跟踪父ui视图中的新节点，这些节点也是子ui视图的容器，但正如我所说的：这只是一个猜测

---

并帮助观察DOM中发生的情况（是否应用了ng enter、ng leave等类）您可以暂时将CSS转换时间设置为一个较长的值，例如100秒

nganimatechilds指令可能与您有关，因为您有嵌套的ui视图元素，涉及结构动画。请参阅

ngAnimateChildren允许您指定此元素的子元素应设置动画，即使子元素的任何父元素当前正在设置动画。默认情况下，当元素具有活动的enter、leave或move（structural）动画时，也不会对具有活动的structural动画的子元素设置动画

另外，请确保使用了正确的css选择器，即

.view animate main container.ng enter

和

view animate sub container.ng enter

&指定了转换

angular.module('btApp.crm.customers', ['ui.router'])
    .config(['$stateProvider', '$urlRouterProvider', function config($stateProvider, $urlRouterProvider) {
    $stateProvider

    .state('main.customerMain', {
        abstract: true,
        templateUrl: '/ng/crm/customers/templates/customerMain.html',
    })

    .state('main.customerMain.overview', {
        url: '/customer/:id',
        views: {
            'menu@main.customerMain': {
                templateUrl: "/ng/crm/customers/templates/menu.html",
                controller: 'CRMCustomerMenuCtrl'
            },
                'content@main.customerMain': {
                templateUrl: "/ng/crm/customers/templates/overview.html",
                controller: 'CRMCustomerOverviewCtrl'
            },
        }
    })
}]);