Javascript Gsap-on.resize问题
我一直试图通过阅读与gsap/on.resize问题相关的其他主题来解决我的问题,但我没有找到任何正确的答案 当我打开菜单时,徽标工作正常,并将其位置设置为屏幕的中心{y:0}。但是,一旦菜单关闭,我就无法将徽标强制恢复到原始位置{y:-logosposition+20}。“菜单关闭状态”上的值未更新 我一定是搞乱了var更新,但我不知道该怎么做 希望有人能帮助我 提前感谢:)Javascript Gsap-on.resize问题,javascript,jquery,responsive,gsap,onresize,Javascript,Jquery,Responsive,Gsap,Onresize,我一直试图通过阅读与gsap/on.resize问题相关的其他主题来解决我的问题,但我没有找到任何正确的答案 当我打开菜单时,徽标工作正常,并将其位置设置为屏幕的中心{y:0}。但是,一旦菜单关闭,我就无法将徽标强制恢复到原始位置{y:-logosposition+20}。“菜单关闭状态”上的值未更新 我一定是搞乱了var更新,但我不知道该怎么做 希望有人能帮助我 提前感谢:) // Scope var menuFrame = $('#menu-frame'); var menuH = wi
// 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()
}
});