3

我正在使用 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>

我现在想添加一个ng-swipe-left绑定到previous(). 我可以自己编写代码，它在功能上可以正常工作。但是我如何基于或触发不同的动画，即下一步我希望它与下面的 CSS 动画一起使用，但是当我希望相反的情况发生时。next()previous()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;
}
4

1 回答 1

1

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

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

于 2013-09-09T07:50:13.757 回答