CODEWITHSUNDEEP
javascriptangularjsanimation
snazzybouche
snazzybouche

Reputation: 2425

Animating sliding left/right when showing/hiding in AngularJS / ngAnimate

I have 3 sections (divs) - we'll call them #section1 to #section3. When the page loads, #section1 is the only one of the three visible owing to ngShow - I have a variable visibleSection in the controller that's a value of either 1, 2 or 3 to determine which is visible.

I have a JSFiddle here that's set up with those conditions.
https://jsfiddle.net/46x01Ldm/14/

However, what I'm looking for is a way to make the sections move when you click "Next" or "Previous".

When the user clicks "Previous", I'd like the old section to slide out to the right and the new section to slide in from the left, as if the user has swiped to the right with their finger.

When the user clicks "Next", I'd like the old section to slide out to the left and the new section to slide in from the right, as if the user has swiped to the left with their finger.

How would I go about achieving this?

Thank you very much for any suggestions or assistance! I have jQuery and animate.css to work with, if that helps.

Upvotes: 0

Views: 77

Answers (1)

Milk Biscuit
Milk Biscuit

Reputation: 28

Given that you're using animate.css, just give the section that needs to move out one of the exit classes (Like bounceOutLeft) and the class you'd like to move in one of the entrance classes (Like bounceInRight).

Along with that, to keep track of which section the user is looking at, I'd have a variable that's keeping track of which section the user is looking at. I'd add 1 to the variable when the user presses the next button and the opposite with the previous button. Then just animate the the children you need based on this variable.

Upvotes: 1

Related Questions