Question

我正在使用ng-view在视图之间使用动画进行转换（角度为1.2RC1）。要确定动画应该采用的方向，我会在调用位置更改之前在ng-view div上插入一个左滑动或右滑动的类。离开动画（首先运行）可以工作，但然后从ng-view div中删除我的类。

我使用服务来确定是向左滑动还是向右滑动，如下所示：

$scope.slideView = function(index, url){ 

  if ( viewSlideIndex.getViewIndex() > index) {
    $('#slideview')
      .toggleClass("slide-left", false)
      .toggleClass("slide-right", true);
  } 
  else {
    $('#slideview')
      .toggleClass("slide-left", true)
      .toggleClass("slide-right", false);
  };
  $location.url(url);
}

更新ng-view div中的类：

<button ng-click='slideView(1, "/pg1")'>Pg1</button>
<button ng-click='slideView(2, "/pg2")'>Pg2</button>
<button ng-click='slideView(3, "/pg3")'>Pg3</button>
<div id="slideView" ng-view class="slide-right"></div>

看起来好像已经缓存了slideView（ng-view）类并在完成时刷新了，所以我想知道如何更新缓存或改变我的方法？

非常感谢您的帮助。

http://jsfiddle.net/RoryOSiochain/BfJWf/

手动将左侧滑动或右侧滑动类插入小提琴中的slideView可以正常工作。

更新：希望我在上面使用Jquery不会混淆问题，使用ng-class和jQuery都会返回相同的结果/体验。

Answer 1

对于遇到此问题的其他人：

事实证明，当使用ng-class时，1.2RC1的输入动画存在问题。现在已在1.2RC2中修复，并按预期工作。

工作演示

http://jsfiddle.net/RoryOSiochain/vWT2z/

更新：使用xpepermint的建议，我已经用工作版本更新了小提琴：

~~（没有完全应用页面索引）~~

如果使用此功能，请在此处设置帧索引值（硬编码为3） -

// // Set the value of the index to compare against here: // if (3 > index) { $scope.slideDir = 'slide-right'; } else { $scope.slideDir = 'slide-left'; };

<击>

Answer 2

我会像这样更改if语句：

function AppCtrl($scope, $location, viewSlideIndex) {
    $scope.slideView = function (index, url) {
        //
        // Set the value of the current view index to compare against here:
        //
        if (viewSlideIndex.getViewIndex() > index)
            $scope.slideDir = 'slide-left';
        else
            $scope.slideDir = 'slide-right';
        viewSlideIndex.setViewIndex(index);
        $location.url(url);
    }

};

如何在Angular中使用ng-view动态设置动画？

2 个答案: