Greensock (gsap) 汉堡包答案

【问题标题】：Greensock (gsap) Hamburger overlayGreensock (gsap) 汉堡包
【发布时间】：2018-11-13 13:01:55
【问题描述】：

在我的 bootstarp 网站中，我添加了 greensock (gsap) 动画。我有一份汉堡菜单。所以点击汉堡菜单后，现在覆盖从左到右打开类型，但我需要从右到左打开类型。我尽力了，但我无法达到我的期望。所以有人帮我这样做。我插入我提到的网址在代码笔中。

https://codepen.io/larpo1/pen/VjzJQN

这是我在我的网站上尝试过的 gsap 代码

$(document).ready(function(){
  var menuIsOpen=false,
      $menu=$(".menu"),
      $menuItem=$(".menu-item"),
      $menuBg=$(".menu-bg"),
      $menuToggle=$(".menu-toggle"),

      menuWidth=300,
      menuItemOffset=150,
      menuBgSkew=-10,
      timeScale={v:1}
  ;
  TweenMax.globalTimeScale(timeScale.v);

  TweenMax.set($menuItem,{
    x:-menuItemOffset
  });
  TweenMax.set($menuBg,{
    skewX:menuBgSkew
  })
  function setTimescale(v){
    TweenMax.to(timeScale,0.5,{
      v:v,
      ease:Quad.easeInOut,
      onUpdate:updateTimescale,
      onComplete:updateTimescale
    });
  }
  function updateTimescale(){
    TweenMax.globalTimeScale(timeScale.v);
  }

  function openMenu(){
    menuIsOpen=true;
    TweenMax.to($menu,0.55,{
      x:menuWidth,
      force3D:false,
      ease:Elastic.easeOut,
      easeParams:[1.01,0.8]
    });
    TweenMax.to($menuBg,0.55,{
      skewX:0,
      force3D:false,
      ease:Elastic.easeOut,
      easeParams:[1.01,0.8]
    });
    $menuItem.each(function(i){
      TweenMax.to($(this),0.7+(i*0.05),{
        delay:0.02*i,
        x:0,
        force3D:false,
        // ease:Quint.easeOut
        ease:Elastic.easeOut,
        easeParams:[1.1,0.6]
      });
    });

  }
  function closeMenu(){
    menuIsOpen=false;
    TweenMax.to($menu,0.2,{
      x:-100,
      ease:Quad.easeIn,
      force3D:false
    });
    TweenMax.set($menuBg,{
      delay:0.2,
      skewX:menuBgSkew,
      force3D:false
    });
    $menuItem.each(function(i){
      TweenMax.to($(this),0.3+(0.05*i),{
        x:-menuItemOffset,
        ease:Quad.easeIn,
        force3D:false
      });
    });


  }
  function toggleMenu(){
    if(menuIsOpen){
      $menuToggle.removeClass('menu-open');
      closeMenu();
    }else{
      $menuToggle.addClass('menu-open');
      openMenu();
    }
  }
  $menuToggle.click(function(){
    toggleMenu();
  });
})

【问题讨论】：

标签： javascript css gsap

【解决方案1】：

为此，您需要浏览 CSS 并查找要修改的重要位置属性。在这种情况下，我将多个left 职位更改为right。此外，在 JS 代码中，您需要修改动画的参数以确保菜单“移动”到正确的方向。我已经修改了您发布的代码，并在此处提供了一个工作示例：

https://codepen.io/justinthielman/pen/rQydjY

我不需要修改 HTML，只需要修改 CSS 和 JS 代码。

【讨论】：