Question

我正在使用AngularJS构建一个简单的网站。有一个名为“项目索引”的页面，可以链接到项目详细信息和关于。我想在访问者访问About时将一种动画应用于项目索引的ng-leave，当访问者访问项目详细信息时，将另一种动画应用于项目索引的ng-leave。

这是可能的，最好的方法是什么？

Answer 1

如果您使用的是ui-router，请尝试使用

$rootScope.$on('$stateChangeStart', 

function(event, toState, toParams, fromState, fromParams){ ... })

向此函数添加一些变量，

$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams){
   if toState.name == 'about'
   $scope.leaveClass = true
   else if toState.name == 'Project Detail'
   $scope.leaveClass = false

然后将类添加到您的ui-view

<div ui-view ng-class="{'aboutLeave':$scope.leaveClass,'detailLeave':!$scope.leaveClass}">

在css中使用动画

.aboutLeave.ng-leave{...}
.detailLeave.ng-leave{...}

我没有尝试过，但它应该有效：）

多个ng-leave实例的不同动画？

1 个答案: