Question

在使用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();
        }
    }
});

}

谢谢

Answer 1

您可以执行以下操作。阻止导航并存储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;
        });
    }
});

在TimelineMax动画中的链接上添加event.preventDefault（）

1 个答案: