Search code examples
angularjsng-animate

2 different animations for next/prev slide with ng-animate

In my case, ng-view is a slider that has arrows to show the next template and the previous template. Currently it has one type of animation for the transition between templates.

<div data-ng-view data-ng-animate="{enter: 'slide-forward-enter', leave: 'slide-forward-leave'}"></div>

I want to extend the behaviour to do different animations depending on which arrow is clicked. Click on the "Next" arrow should perform slide-forward-enter & slider-forward-leave animation, while click on the "Previous" arrow should perform slide-reverse-enter & slider-reverse-leave.

How to achieve this?

Solution

  • You could add a class to your ng-view that changes based on the transition you want. From within your controller you could check whether the "Next" or "Previous" button was clicked, and setting the transition class accordingly. Let's assume you're defining 2 different transitions, 'forward' and 'back':

    HTML

    <div data-ng-view data-ng-animate="transitionClass"></div>
<button ng-click="slide('back')">Previous</button>
<button ng-click="slide('forward')">Next</button>

    Controller

    $scope.slide= function(myTransition) {
    $rootScope.transitionClass = myTransition;
}

    CSS

    .forward-slide-enter {...}
.forward-slide-enter-active {...}
.forward-slide-leave{...}
.forward-slide-leave-active {...}

.back-slide-enter {...}
.back-slide-enter-active {...}
.back-slide-leave{...}
.back-slide-leave-active {...}

    Further reading

    See this question for details.