在路由配置中爲AngularJS中的ng-view定義動畫？

當Angular 1.2的按鈕被點擊/點擊時，我已經看到了向前和向後動畫ng-view的各種解決方法。這涉及在你的作用域上有一個方法，它將範圍變量設置爲在ng-class中使用的頁面/動畫，以在其上具有ng-view指令的元素上設置類。在一個更大的應用程序中，這看起來不太可擴展。其中一部分我相信會創建一個服務/工廠來注入控制器，以避免重複代碼。但我真的想知道，在路由器解析功能中，您可以做些什麼，您可以在那裏爲動畫設置一些值，並將它們發送給返回立即解決的承諾的服務。這可以在路由改變之前在ng-view元素上設置類，並且可以通過這種方式進行管理。在路由配置中爲AngularJS中的ng-view定義動畫？

有沒有人有一個更明確的方式來處理動畫ng-view的前進和後退取決於用戶將要走什麼路線？

來源

2013-10-30 Kelly Milligan

這裏肯定會讓你感興趣的鏈接：http://code.angularjs.org/1.1.4/docs/api/ng.directive:ngView#animations – tomahim

我認爲ngAnimate正是你正在尋找的，但請注意，此模塊已在1.2中修改，而1.1.4的CSS動畫在1.2中不起作用。 http://slid.es/gsklee/animation-in-angularjs-12 - 在這裏你可以看到變化的好概述。 – lort

是的，完全理解如何做官方1.2的方式。尋找更具可擴展性的解決方案，在路由配置中執行此操作，也將支持相反的操作。 –

這是我一直在玩的一個概念，並且能夠在一些中繼器元素的視圖中工作。我還沒有得到它的動畫ng-view呢......但應該給你一個很好的起點。

概念是在每個路由配置中存儲一個ng-animate對象。您可以將範圍對象傳遞給ng-animate，而無需表達式。

function Ctrl($scope){ 
    $scope.ANIM={enter: 'animate-enter', leave: 'animate-leave'}; 
} 

<li ng-animate="ANIM">

在配置：

$routeProvider.when('/foo', { 
       controller: 'Ctrl', 
       templateUrl:'view1.html', 
       anim:{enter: 'skew-enter', leave: 'skew-leave'} 
      })

然後在run()監聽$routeChangeStart，並從當前的路由配置

app.run(function($rootScope){ 
      $rootScope.anim={enter: 'animate-enter', leave: 'animate-leave'} 
      $rootScope.$on('$routeChangeStart', function(event, current){    
       $rootScope.anim= current.anim 
      }) 
     })

成了動畫在我的沙箱版本我做的：

function Ctrl($scope, $rootScope){ 
     $scope.ANIM=$rootScope.anim; 
    }

再次......這仍然是概念證明階段。當我有兩個相同的ng動畫視圖，並在每個控制器使$scope.anim=$rootScope.anim它的作品。

希望這有助於...如果你做任何事情，更是好奇吧

來源

2013-10-30 23:41:22 charlietfl

我找到什麼工作是利用CSS的子類，讓你的貨櫃裏你有一個綁定到一個名爲屬性「模式」或沿着這些線的東西。

那麼當它想要切換動畫的時候就改變它們，無論這是使用$ routeChangeSuccess還是別的什麼都取決於你。

來源

2014-02-06 16:07:21 Olie440

在路由配置中爲AngularJS中的ng-view定義動畫？

回答

相關問題