Добавление event.preventDefault () к ссылкам в анимации TimelineMax - PullRequest
Новая
       61

Добавление event.preventDefault () к ссылкам в анимации TimelineMax

0 голосов
/ 20 сентября 2018

В анимированном меню с использованием GSAP, когда я щелкаю ссылку на пункт меню, я хочу полностью изменить TimelineMax до изменения страницы.

Вот рабочий бит кода.Все работает так, как мне нужно.Я просто не знаю, как отложить событие клика. 

navigation: function() {

var $sidebar = '',
    $hamburger = '.menu',
    $trigger = '.nav-trigger',
    $items = '.menu-item a',
    $nav = '.nav';

$sidebar = new TimelineMax({
    paused: true,
    reversed: true
});

$sidebar
    .add(TweenMax.to($nav, 0.1, { visibility:'visible' } ))
    .add(TweenMax.to($body, 0.1, { className:'+=nav--is-open' } ))
    .add(TweenMax.to($hamburger, 0.1, { className:'+=menuactiv' } ))
    .add(TweenMax.to($nav, 0.955, { x:0, ease: Power4.easeInOut } ), '=-0.15')
    .add(TweenMax.staggerTo($items, 0.15, { y:'0%', ease: Power4.easeInOut }, 0.15), '=-0.15');

$(document).on('click', $trigger, function(e) {
    if ( !$body.hasClass( 'nav--is-open' ) ) {
        $sidebar.reversed() ? $sidebar.play().timeScale(1) : $sidebar.reverse();
    }
} );

$(document).on('click', $body, function(e) {
    if ( $body.hasClass( 'nav--is-open' ) ) {
        $sidebar.reversed() ? $sidebar.play().timeScale(1) : $sidebar.reverse();
    }
} );

$(document).on('keyup',function(e) {
    if (e.keyCode == 27) {
        if ( $body.hasClass( 'nav--is-open' ) ) {
            $sidebar.reversed() ? $sidebar.play().timeScale(1) : $sidebar.reverse();
        }
    }
});

}

Спасибо

1 Ответ

0 голосов
/ 21 сентября 2018

Вы можете сделать следующим образом.Запретить навигацию и сохранить свойство href.Затем используйте событие временной шкалы onReverseComplete для запуска навигации только после ее завершения.

код ниже 

$(document).on('click', $trigger, function(e) {
    e.preventDefault();

    if ( !$body.hasClass( 'nav--is-open' ) ) {
        $sidebar.reversed() ? $sidebar.play().timeScale(1) : $sidebar.reverse();

        travelTo = $(this).attr("href");
        $sidebar.eventCallback("onReverseComplete",function(){
            window.location.href = travelTo;
        });
    }
});
...