javascript - 如何正确制作 GSAP 菜单动画？

Question

Holla，当我关闭菜单并再次打开它时，我需要重置动画。我怎样才能做到这一点？动画仅在我第一次打开菜单时起作用。

CSSPlugin.defaultTransformPerspective = 600;
TweenMax.staggerFrom('ul#menu li', 1.5, {rotationX:-90, transformOrigin:"50% 0%", ease:Elastic.easeOut}, 0.4);

代码如下:http://codepen.io/hafsadanguir/pen/qOdaab .

感谢您的帮助!

Answer 1

是 this 您想要什么样的结果？

JavaScript:

CSSPlugin.defaultTransformPerspective = 600;
var toggleMenu = $('.menu-toggle');
var logo = $('#logo');
var logotitle = $('#logotitle');
var listItems = $('ul#menu li');
var timeline = new TimelineMax({ paused: true, reversed: true });
timeline.fromTo([logo, logotitle], 0.6, { top: 300 }, { top: -50, ease: Power2.easeInOut });
timeline.staggerFromTo(listItems, 1.2, { autoAlpha: 0, rotationX: -90, transformOrigin: '50% 0%' }, { autoAlpha: 1, rotationX: 0, ease: Elastic.easeOut.config(1, 0.3) }, 0.1, 0.3);

toggleMenu.on('click', function() {
  $(this).toggleClass('on');
  timeline.reversed() ? timeline.play() : timeline.reverse();
});

一些事情发生了变化，详细信息如下:

• 首先，我没有看到需要 hidden 类，因此我已将其从解决方案中删除。
• 此外，.menu-section 元素上的 on 类toggled 似乎也没有必要。我删除了它，但保留了 .menu-section CSS 规则中定义的属性。
• 进入有趣的部分，JavaScript。
• 您基本上需要一个 TimelineMax 进行操作。
• 根据您在 JavaScript 设置面板中的导入判断，我假设您对 TimelineMax(和 TimelineLite)的含义有所了解。无论如何，TimelineLite 都是关于构建和管理 TweenLite、TweenMax、TimelineLite 和/或 TimelineMax 实例的序列，而 TimelineMax 是一个扩展TimelineLite，为其添加更多功能。
• 因此，代码中发生的情况是 TimelineMax 实例已初始化，补间已添加到其中，然后单击 .menu-toggle按钮元素，此时间线要么播放，要么反转。
• 行 timeline.reversed() ？ timeline.play() :timeline.reverse(); 基本上是 if 条件的缩短版、奇特版本，它主要取决于个人喜好，没有任何性能提升或我所知道的任何事情。在正常的 if 子句中，它会这样写:
  • if (timeline.reversed()) { 时间轴.play(); } else { 时间轴.reverse(); }。
  • 正在检查的条件是 .reversed() 时间线的属性。您会注意到，在初始化 new TimelineMax(...) 时，我为其设置了 reversed: true 属性。它的作用是，将所有补间添加到时间线后，它的行为就像立即反转时间线，以便时间线的方向> 已被翻转。请在我上面分享的 TimelineMax 文档链接中了解更多相关信息。
  • .play() 和 .reverse() 方法非常不言自明，因为它们分别使时间线向前或向后。
• 就是这样。

希望这有帮助。