Показать сообщение отдельно
  #21 (permalink)  
Старый 12.11.2019, 18:29
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Luther
приходиться дублировать, есть ли возможность объединения?
Можно и одним обработчиком, в нем ведь будет известен и тип события, и его источник. В какофонии сообщений я не заметил этого "кнопка будет оставаться на своем месте и не налазить на меню, но ее анимация должна проигрываться, но только после открытия меню или закрытия". Не проблема, но наверное ее лучше запускать с определенного шага анимации (step), а не в конце ее. Например, пусть запуск анимации, это наличие класса 'hamburger--animate' у дочерних элементов кнопки, то есть:

.hamburger--animate .button-bar1 {
    background-color: #fff;
    transform: rotate(-45deg) translate(-8px, 7px);
}

.hamburger--animate .button-bar2 {
    opacity: 0;
}

.hamburger--animate .button-bar3 {
    background-color: #fff;
    transform: rotate(45deg) translate(-7px, -7px);
}


которые добавляются им на определенном шаге анимации меню. При определении объектов определяем для меню данные, ну и запуск в шаге:

mobMenu = $(this).data({end: 1})

        bt.on('click touchend', function (e, c) {
            
            e.stopPropagation(); 
            var dir = c ? 0 : !bt.hasClass(options.classActive); //направление в анимации
            bt.toggleClass(options.classActive)
            mobMenu.animate({[options.side]: -options.width + options.width * dir}, {
                duration: options.animationSpeed, 
                step: function(pos, f) {
                    var v = f.start + f.end, 
                        d = dir ? v - v * .3 //старт анимации кнопки при открытии 
                                : v * .5; //старт анимации кнопки при закрытии
                    if($(this).data('end') && pos > d) {
                        bt.toggleClass('hamburger--animate'); //включаем анимацию/возвращаем в начало
                        $(this).data({end: 0}) //более не реагируем на изменения
                    }
                },
                complete: function(f) {
                    $(this).data({end: 1}) //разрешаем запуск анимации кнопки
                }
            });
                
        })


Плюс различные временные характеристики анимации доступны, и тогда все может получится, по крайней мере лучше, чем по окончании анимации меню, на мой взгляд.

Последний раз редактировалось laimas, 12.11.2019 в 18:34.
Ответить с цитированием