小编Isi*_*oGH的帖子

有条件地动画ng视图过渡

我试图根据所涉及的视图将动画应用于ng-view(路由).

例如,从View1到View2,我需要View1从左侧离开,View1从右侧进入.否则,从View2到View1,我需要View2从右侧离开,View1从左侧进入.

但我也有需要在两个视图中应用不同动画的情况,例如,View1会逐渐淡出,而View2会进入缩放.

我正在做的是在ng-view中使用作用域关联变量作为类:

<div ng-view class="{{transition}}"></div>
Run Code Online (Sandbox Code Playgroud)

在每个路径更改中设置此变量,并在每个控制器中使用以下内容:

$scope.transition=Global.transition;

$rootScope.$on("$routeChangeStart",function (event, current, previous) {
   // Here I get the leaving view and the entering view and the kind of transition is selected
   ...
   $scope.transition=selectedLeavingTransition;  // Set the transition for the leaving view
   Global.transition=selectedEnteringTransition; // Set the transition for the entering view
});
Run Code Online (Sandbox Code Playgroud)

Global是一种服务,用于为离开范围设置输入范围的转换变量.

这样,当检测到路径更改时,使用与selectedLeavingTransition关联的类设置当前ng-view,并使用与selectedEnteringTransition关联的类设置输入ng-view.

例如,如果路径更改是从View1到View2,则动画期间的ng视图可以是:

<div ng-view class="fadeOut ng-animate ng-leave ng-leave-active"></div>
<div ng-view class="scaleUp ng-animate ng-enter ng-enter-active"></div>
Run Code Online (Sandbox Code Playgroud)

在这种情况下,CSS可以是:

fadeOut.ng-leave {animation:1s fadeOut;}
scaleUp.ng-enter {animation:1s scaleUp;}
Run Code Online (Sandbox Code Playgroud)

虽然它有效,但我想知道是否有更简单的方法来做它,因为它似乎有点乱.

javascript animation angularjs ng-animate

2
推荐指数
1
解决办法
1035
查看次数

控制器和服务,前两个字母大写

我有一个名为的控制器EQuestionController和一个名为EQuestionServiceGrails 2.5.3 的服务.

当我调用控制器时,我需要像/EQuestion我期望的那样调用它/eQuestion,但在这种情况下会出现404错误.

当我在控制器中注入服务时,我需要按照def EQuestion我希望将其注入的方式执行def eQuestion,但在这种情况下它是null.

用前两个字母大写命名控制器或服务是不正确的?

grails

2
推荐指数
1
解决办法
223
查看次数

标签 统计

angularjs ×1

animation ×1

grails ×1

javascript ×1

ng-animate ×1