Question

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

我的基本网站布局是：

main.html（有一个ui-view，已经淡入）
- customerMain.html位于“main”

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>

customerMain.html

<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>

CustomerModule

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'
            },
        }
    })
}]);

简而言之，我正在尝试对两个内容视图执行不同的动画，但我尝试过的所有内容似乎都没有生效，即使我删除了所有父动画，仍然没有应用动画对观点。我不完全确定是否添加了ng-enter，它太快了。

我最初想到的是淡入式动画正在应用于主ui视图，然后在加载子视图时也运行，因此你看不到动画，但是，移除父动画和延迟儿童动画，仍然没有。

欢迎任何指示。

Answer 1

根据我的经验，在父视图至少更改一次之后，ngAnimate不能使用ui-router的子视图（当初始页面加载时，当父视图及其子视图由路由器初始加载时，它可用于从第二次尝试开始，有什么更奇怪的过渡工作，而它完全跳过了第一次尝试切换孩子视图时应该存在的过渡。我猜测为什么那个ngAnimate无法跟踪父ui视图中的新节点，这些节点也是儿童ui-views的容器，但正如我所说：这只是一个猜测。

为了帮助观察DOM中发生的事情（无论是否应用ng-enter，ng-leave等等），您可以暂时将CSS过渡时间设置为较长的值，例如： 100秒

Answer 2

鉴于您具有涉及结构动画的嵌套ui-view元素，

ngAnimateChildren 指令可能与您相关。见https://msdn.microsoft.com/en-us/library/wdsk6as6.aspx

ngAnimateChildren允许您指定即使任何儿童的父母当前正在制作动画，此元素的子元素也应设置动画。默认情况下，当元素具有活动的输入，离开或移动（结构）动画时，也不具有活动结构动画的子元素。

还要确保使用正确的css选择器，即.view-animate-main-container.ng-enter＆amp; view-animate-sub-container.ng-enter＆amp;他们指定了过渡。

嵌套的ui-view动画

2 个答案: