CODEWITHSUNDEEP
javascriptanimationangularjstouch
planetjones
planetjones

Reputation: 12633

AngularJS 1.2 - different animation based on left swipe or right swipe

I am using AngularJS 1.2. I have managed to use:

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

in order to allow a user to "swipe" right to move through divs. This works ok.

Main Page

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

Partial

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

I now want to add an ng-swipe-left which binds to previous(). I can code this myself and it will functionally work ok. But how do I fire a different animation based on next() or previous() i.e. when going next I want it to work with the CSS animation below, but when previous() I want the reverse to happen.

The animation CSS is:

.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;
}

Upvotes: 3

Views: 4823

Answers (1)

AlwaysALearner
AlwaysALearner

Reputation: 43947

I am not familiar with angular-touch. But I think you are trying to do something like this:

<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;     
}

and change the CSS class names accordingly.

Upvotes: 1

Related Questions