Добавить/удалить класс при клике.

[Skrowaks]

Здравствуйте.
Имеется код:

<script type="text/javascript">
 $(function(){
            $('.menu-btn').click(function(){
                $('.menu').toggleClass('dis2 anim1');
            });
        });
</script>

По клику на кнопку .menu-btn ссылки .menu (у которых изначально был display: none; ) получают класс dis2 {display: block} и .anim1. Соответственно при повторном клике эти классы удаляются.
А нужно, чтобы при втором клике по .menu-btn первые два класса удалялись, и вместо них присваивался класс .anim2. Чтобы проигрывалась анимация скрытия меню.
При поиске выдает только toggle, но он не подходит для меня. Или я чего-то не понимаю.

[рони]

Чтобы проигрывалась анимация скрытия меню.

как же она приграется если будет display: none если удалить dis2

[Skrowaks]

Нужно чтобы сначала проигрывалась анимация и далее классу присваивался display:none;

[laimas]

Нужно чтобы сначала проигрывалась анимация

Значит и класс переключайте по окончании анимации.

[Skrowaks]

Не понимаю каким образом это реализовать. За этим и обратился.

[warren buffet]

Skrowaks, у тебя или стили криво написаны, или одно из двух. При удалении правила которое влияет на свойство указанное в transition, анимация срабатывает в точности наоборот и ничего втыкать дополнительно не надо. То есть по classList.toggle() меню будет бегать туда-сюда как миленькое.

Но если сильно хочется усложнить себе жизнь, то повешайся на

elem1.addEventListener('transitionend',function(e) {elem2.classList.toggle('come-back')});