Анимация раздвигания влево/вправо при показе/скрытии в AngularJS/ngAnimate

Question

У меня 3 раздела (divs) - назовем их #section1 - #section3. Когда страница загружается, #section1 является единственной из трех видимых благодаря ngShow - у меня есть переменная visibleSection в контроллере, то есть значение 1, 2 или 3, чтобы определить, что видно.

У меня есть JSFiddle, который настроен с этими условиями.
https://jsfiddle.net/46x01Ldm/14/

Однако, я ищу, чтобы сделать разделы перемещенными, когда вы нажимаете «Далее» или «Предыдущий».

Когда пользователь нажимает «Предыдущий», мне нужно, чтобы старый раздел скользил вправо, а новый раздел - слева, как если бы пользователь провел пальцем вправо.

Когда пользователь нажимает кнопку «Далее», я хотел бы старый раздел выскользнуть к оставил и новый раздел, чтобы скользить от правой, как если бы пользователь прокатывается на слева пальцем.

Как бы я мог добиться этого?

Большое спасибо за любые предложения или помощь! У меня есть jQuery и animate.css для работы, если это помогает.

Answer 1

Учитывая, что вы используете animate.css, просто дайте раздел, который должен вывести один из классов выхода (например, bounceOutLeft) и класс, который вы хотите переместить в один из классов ввода (например, bounceInRight).

Наряду с этим, чтобы отслеживать, в какой секции пользователь смотрит, у меня будет переменная, которая отслеживает, какой раздел пользователь смотрит. Я бы добавил 1 к переменной, когда пользователь нажимает следующую кнопку и наоборот с предыдущей кнопкой. Затем просто анимируйте нужные вам дети на основе этой переменной.