Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Добавить/удалить класс при клике. (https://javascript.ru/forum/misc/64292-dobavit-udalit-klass-pri-klike.html)

Skrowaks 01.08.2016 17:00

Добавить/удалить класс при клике.
 
Здравствуйте.
Имеется код:
<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, но он не подходит для меня. Или я чего-то не понимаю.

рони 01.08.2016 17:34

Цитата:

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

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

Skrowaks 01.08.2016 17:39

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

laimas 01.08.2016 19:58

Цитата:

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

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

Skrowaks 02.08.2016 01:33

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

warren buffet 02.08.2016 05:08

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

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

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


Часовой пояс GMT +3, время: 20:20.