ui路由器如何與ng-animate配合使用？

我當然希望你們能告訴我我哪裏出錯了。ui路由器如何與ng-animate配合使用？

所以我嘗試用ng-animate將ui-router放在一起。路由就像魅力一樣。但是，ng-animate蹣跚前進。根據我一直在閱讀的所有示例和文檔，ui-view容器應該是重複的，但不會發生。相反，容器的innerHTML被替換。我還使用一個名爲animate.css的外部動畫庫

所以我拼湊了一個plunkr，希望你們中的一些人能夠幫助我。

Here is a plunkr demo

廠景：

<section class="view1" > 
<h1>VIEW 1</h1> 
<a ui-sref="view2">view2</a> 
</section>

視圖2：

<section class="view2" > 
<h1>VIEW 2</h1> 
<a ui-sref="view1">view1</a> 
</section>

風格：

body { 
    width: 100%; 
} 

.view-container { 
    width: 100%; 
} 

.view-container.ng-enter .view1, 
.view-container.ng-enter .view2, 
.view-container.ng-leave .view1, 
.view-container.ng-leave .view2 { 
    position: absolute; 
    left: 30px; 
    right: 30px; 
    transition: 0.5s all ease; 
    -moz-transition: 0.5s all ease; 
    -webkit-transition: 0.5s all ease; 
} 

.view-container.ng-enter .view1, 
.view-container.ng-enter .view2 { 
    -webkit-animation: slideInRight 0.5s both ease; 
    -moz-animation: slideInRight 0.5s both ease; 
    animation: slideInRight 0.5s both ease; 
} 

.view-container.ng-leave .view1 .view-container.ng-leave .view2 { 
    -webkit-animation: slideOutLeft 0.5s both ease; 
    -moz-animation: slideOutLeft 0.5s both ease; 
    animation: slideOutLeft 0.5s both ease; 
} 

.view1, 
.view2 { 
    width: 100%; 
    height: 300px; 
    border: 2px solid red; 
} 

.view2 { 
    border: 2px solid green; 
}

腳本：

 'use strict'; 

var mainModule = angular.module('poc', ['ui.router', 'ngAnimate']); 
mainModule.config(["$stateProvider", "$urlRouterProvider", 
    function($stateProvider, $urlRouterProvider) { 

     $stateProvider 
      .state('view1', { 
       url: '/view1', 
       templateUrl: 'view1.html', 
      }).state('view2', { 
      url: '/view2', 
      templateUrl: 'view2.html', 
     }); 

     $urlRouterProvider.otherwise('/view1'); 
    } 
]); 

mainModule.run(["$rootScope", "$state", 
    function($rootScope, $state) { 

     $rootScope.$on('$stateChangeSuccess', function(event, endState, endParams, startState, startParams) { 
      console.log(endState); 
     }); 

     $rootScope.$on('$stateChangeError', function(event, endState, endParams, startState, startParams) { 
      console.warn(startState); 
      console.warn(endState); 
     }); 
    } 
]);

的index.html：

 <!DOCTYPE html> 
<html> 

    <head> 

    <link rel="stylesheet" href="style.css" /> 
    </head> 

    <body data-ng-app="poc"> 
    <div ui-view="" class="view-container"></div> 
    <script src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9" data-require="[email protected]"></script> 
    <script src="https://code.angularjs.org/1.4.9/angular-animate.js" data-semver="1.4.9" data-require="[email protected]*"></script> 
    <script data-require="[email protected]" data-semver="0.2.18" src="//cdn.rawgit.com/angular-ui/ui-router/0.2.18/release/angular-ui-router.js"></script> 
    <script src="script.js"></script> 
    </body> 

</html>

任何幫助表示讚賞。

來源

2016-02-27 JahManCan

您需要添加一些動畫定義爲slideInRight和slideOutLeft

可以使用animate.css庫的。

對於新手我建議把這個動畫選擇您<ui-view>元素

實際發生的是檢測的過渡時間，當....元素將被克隆允許2 DOM一次......一個進入和離開。您可以在現場HTML瀏覽器開發工具

DEMO

來源

2016-02-27 22:39:17 charlietfl

耶看到這一點，移動選擇的用戶界面視圖元素做的伎倆。但是，我只是想知道爲什麼角色無法檢測視圖更改如果選擇器應用於容器子元素？ – JahManCan

你可以。你需要多玩一點css，但是因爲你沒有動畫定義，樣式已經開始了，所以現在最容易顯示 – charlietfl

ui路由器如何與ng-animate配合使用？

回答

相關問題