Question

我正在尝试在ng-view中的两个动画类之间切换。这就是我在html中设置ng-view的方法：

 <div id="animation-container" class="view-animate-container">
    <div id="ng-view" ng-view class="view-animate"></div>
  </div>

这是我的第一个动画的css

.view-animate.ng-enter, .view-animate.ng-leave {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.8s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.8s;
display:block;
position:absolute;
top:0;
left:0;

 }

 .view-animate.ng-enter {
  -webkit-transform: translate3d(100%, 0, 0);
 }
 .view-animate.ng-enter.ng-enter-active {
  -webkit-transform: translate3d(0, 0, 0);
 }
 .view-animate.ng-leave.ng-leave-active {
-webkit-transform: translate3d(-100%, 0, 0);
 }

第二部动画：

.view-leave.ng-enter, .view-leave.ng-leave {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.8s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.8s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.8s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.8s;

display:block;
position:absolute;
top:0;
left:0;

}
 .view-leave.ng-enter {
opacity:0;
  -webkit-transform: translate3d(-100%, 0, 0);
 }
 .view-leave.ng-enter.ng-enter-active {
opacity:1;
  -webkit-transform: translate3d(0, 0, 0);
 }
 .view-leave.ng-leave.ng-leave-active {
opacity:0;
-webkit-transform: translate3d(100%, 0, 0);
}

我所要做的就是在单击后退按钮时将类从view-enter更改为view-leave。

 <a  id="back-btn" class="btn back" href="javascript:history.back()">BACK</a>

我写的这个Jquery代码几乎完成了工作，但不是100％：

$("#back-btn").click(function(){

$("#ng-view").attr('class','view-leave');

});

它似乎以正确的方向为离开容器设置动画，但不是输入容器。所以我正在寻找一个简单的解决方案，看似简单的问题。

Answer 1

您甚至不需要jQuery，您可以使用Angular的ng-class属性。在后退按钮中添加ng-click，后者会调用控制器内的功能。像这样：

在您的HTML中：

<div id="animation-container" class="view-animate-container">
    <div id="ng-view" ng-view class="view-animate" ng-class="animationClass"></div>
</div>

<a class="btn back" href="javascript:history.back()" ng-click="toggleAnimation()">BACK</a>

在您的控制器中：

$scope.animationClass = "view-enter";

$scope.toggleAnimation = function() {
    if ($scope.animationClass === "view-enter") {
        $scope.animationClass = "view-leave";
    } else if ($scope.animationClass === "view-leave") {
        $scope.animationClass = "view-enter";
    }
};

Answer 2

我发现新的$routeChangeStart事件采用了不同的方式。此解决方案会保存历史记录，以检查下一页是否实际上是上一页。

将它放在你的控制器中：

$scope.backward = false;
$scope.history = [];

$scope.$on('$routeChangeStart', function(next, current) {
  var previous = $scope.history[$scope.history.length - 2];
  if (previous && current.originalPath === previous.originalPath) {
    $scope.backward = true;
    $scope.history.pop();
  } else {
    $scope.backward = false;
    $scope.history.push(current);
  }
});

然后使用ng-view周围的容器，ng-class对$scope.backward作出反应。

<div ng-class="{'backward': backward}">
    <ng-view class="view-animate">
</div>

有两个CSS动画。 .view-animate上的转发或您用于ng-view的任何课程。而.backward .view-animate上的落后。

Answer 3

对于那些可能正在寻找这个问题的简单解决方案的人来说，扩展@muenchdo的答案。我设置了一个超时，以便在转换结束后恢复到上一个动画。

像这样：

$scope.animationClass = "view-enter";  
$scope.toggleAnimation = function() {
        $scope.animationClass = "view-leave";
    $timeout(function() {
      $scope.animationClass = "view-enter";
      }, 350);  
}

这是我能找到的最简单的方法，希望这可以帮助那些寻找简单解决方案的人看起来像简单的功能。

使用Angular动态更改ng-view动画类

3 个答案: