javascript - 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>

我现在想添加一个绑定(bind)到 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;
}

Answer 1

我不熟悉 Angular 触摸。但我认为你正在尝试做这样的事情:

<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 类名。