Joe Komputer Joe Komputer - 6 months ago 22
Javascript Question

Changing ng-view animation class dynamically with Angular

I am trying to toggle between two animation classes within my ng-view. This is how I have my ng-view setup in my html:

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


And here is the css for my first animation

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


2nd animation:

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


All I'm trying to do is change the class from view-enter to view-leave when the back button is clicked.

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


This Jquery code I wrote almost got the job done, but not 100%:

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

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

});


It seemed to animate the leaving container in the right direction, but not the entering container. So I'm looking for a simple solution to what seems like a simple problem.

Answer

Just for anyone else that might be looking for a simple solution to this question, expanding off @muenchdo answer. I set a timeout to revert to the previous animation after the transition was over.

like this:

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

This was the simplest way I could find out there, hopefully this helps someone out there that is looking for a simple solution to what seems like simple functionality.