1

我一直在尝试通过阅读与 gsap / on.resize 问题相关的其他主题来解决我的问题，但我没有找到任何正确的答案。

当我打开菜单时，徽标正常工作并将其位置设置为屏幕中心 { y:0 } 。但是，一旦菜单关闭，我就无法将徽标强制返回其原始位置 { y:-logoPosition +20 }。这些值不会在“菜单关闭状态”上更新。

我一定是在搞乱 var 更新，但我无法完成这项工作。

希望可以有人帮帮我 ！

提前致谢 ：）

提琴手

// Scope

var menuFrame = $('#menu-frame');
var menuH = window.innerHeight;
var navH = $("nav").height();
var logoH = $("#logo").height();
var logoPosition = (menuH -navH)/2;
var toggleMenu = $('.menu-toggle');
var logo = $('#logo');
var logoDiv = $('#logo-divider');
var navList = $('ul#menu-nav li');


// New Gsap timeline
var menuAnim = new TimelineMax({ paused: true, reversed: true });

// Animation when toggle clicked

menuAnim.fromTo([menuFrame], 0.6, {backgroundColor : 'rgba(0, 0, 0, 0.01)'}, {backgroundColor : 'rgba(250, 250, 250, 1)', ease: Power2.easeInOut},0.1);
menuAnim.from([logo], 0.6, { y:-logoPosition +20, ease: Power2.easeInOut });
menuAnim.fromTo([logoDiv], 0.6, { width: 0}, { width: '20%', ease: Power2.easeInOut });
menuAnim.staggerFromTo(navList, 1.2, {scale:0.5, opacity:0, delay:0.5}, { scale:1, opacity:1, ease:Elastic.easeOut, force3D:true}, 0.2);


// Reverse anmiation on click

toggleMenu.on('click', function() {

    $(this).toggleClass('active');
    menuAnim.reversed() ? menuAnim.play() : menuAnim.reverse();

});

// If toggle is active logo position is middle off the frame

$(window).resize(function(){

    if ($(toggleMenu).hasClass('active')) {
        menuH = window.innerHeight;
        navH = $("nav").height();
        logoH = $("#logo").height();
        logoPosition = (menuH -navH)/2;
      var menuAnim = new TimelineMax({ paused: true, reversed: true });
        menuAnim.from([logo], 0.6, { y:0 }, {  ease: Power2.easeInOut });
        menuAnim.pause()

    }
    // If toggle is not active logo position = top of the frame 

    else {

        menuH = window.innerHeight;
        navH = $("nav").height();
        logoH = $("#logo").height();
        logoPosition = (menuH -navH)/2;
        var menuAnim = new TimelineMax({ paused: true, reversed: true });

        menuAnim.from([logo], 0.6, { y:-logoPosition +20 }, {  ease: Power2.easeInOut });
        menuAnim.pause()
    }
});
4

0 回答 0