AngularJS 1.2 - 根据向左或向右滑动进行不同的动画

Question

我正在使用AngularJS 1.2版本。我已经成功使用了：

<script src="js/angular-touch.js"></script>
<script src="js/angular-animate.min.js">

为了让用户能够通过向右滑动来浏览div，这个功能已经实现。这个功能表现良好。

主页面

<div ng-view class="my-slide-animation" >
</div>

部分

<div ng-swipe-right="next()">
</div>

现在，我想添加一个绑定到previous()的ng-swipe-left。虽然我自己可以编写代码，它能够正常工作，但是如果我想根据next()或previous()触发不同的动画，该怎么做呢？也就是说，当进行下一步时，我希望它能使用下面的CSS动画，但是当使用previous()时，我希望反向发生。

CSS 动画如下：

.my-slide-animation.ng-enter, .my-slide-animation.ng-leave {
    -webkit-transition:0.5s linear all;
    -moz-transition:0.5s linear all;
    -o-transition:0.5s linear all;
    transition:0.5s linear all;

    position:absolute;
    top:0;
    left:0;
    right:0;
}

.my-slide-animation.ng-enter {
    z-index:100;
    top:600px;
    opacity:0;
}
.my-slide-animation.ng-enter.ng-enter-active {
    top:0;
    opacity:1;
}

.my-slide-animation.ng-leave {
    z-index:101;
    top:0;
    opacity:1;
}
.my-slide-animation.ng-leave.ng-leave-active {
    top:-600px;
    opacity:0;
}

- planetjones

Answer 1

我不熟悉angular-touch。但是我认为你正在尝试做类似于这样的事情：

<div ng-view ng-class="{'next-animation' : movedToNext, 
'previous-animation' : movedToPrevious}">
</div>

JS：

$scope.next = function(){
    $scope.movedToNext = true;
    $scope.movedToPrevious = false;
}

$scope.previous = function(){
    $scope.movedToPrevious = true;
    $scope.movedToNext = false;     
}

并相应地更改CSS类名称。

- AlwaysALearner

---

我不确定这是否是问题所问的，因为如果您在路由级别（ng-view）上进行动画处理，则会在问题示例CSS中为您添加类。但是它总是朝着同一个方向前进。 - Kelly Milligan