Nested ui-view animations <p>I'm struggling to create separate animations on two ui-view elements simultaneously (or any animations), using ui router.</p> <p>My basic site layout is: </p> <ul> <li>main.html (has one ui-view, which is faded in) <ul> <li>customerMain.html which sits in "main" </li> </ul></li> </ul> <p><strong>main.html</strong></p> <pre><code>&lt;div id="work-container"&gt; &lt;div class="menu"&gt; &lt;!-- some ul/li stuff --&gt; &lt;/div&gt; &lt;div class="content"&gt; &lt;div ui-view class="view-animate-main-container"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>customerMain.html</strong></p> <pre><code>&lt;div id="customer-work-container"&gt; &lt;div class='menu'&gt; &lt;div ui-view='menu' class='view-animate-main-container'&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="content"&gt; &lt;div ui-view='content' class="view-animate-sub-container"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>CustomerModule</strong></p> <pre><code>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' }, } }) }]); </code></pre> <p>In a nutshell, i'm trying to perform different animations on the two content views, but everything i've tried doesn't seem to take effect, even if i remove all the parent animations there is still no animations being applied to the views. I'm not entirely sure if ng-enter is being added, it's too quick to see.</p> <p>What i originally thought was happening was the fade-in animation was being applied to the main ui-view, which in then turn also runs while loading the child ui-views thus you don't see the animations, however, removing parent animations and delaying child animations, still nothing.</p> <p>Would welcome any pointers. </p>