如何正确设置 GSAP 菜单的动画？

Question

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

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 按钮元素时，此时间线要么播放 em> 或 反转。
• timeline.reversed() ? timeline.play() : timeline.reverse(); 行基本上是if 条件的一个缩短的花哨版本，它主要取决于个人喜好，没有性能提升或我所知道的任何事情。在普通的if 子句中，它应该是这样写的：
  • if (timeline.reversed()) { timeline.play(); } else { timeline.reverse(); }。
  • 正在检查的条件是timeline 的.reversed() 属性。您会注意到，在初始化new TimelineMax(...) 时，我在其上设置了reversed: true 属性。它的作用是在将所有补间添加到timeline 之后，它的行为就像timeline 立即被反转，从而timeline 的方向已被翻转。在我上面分享的TimelineMax 文档链接中阅读更多相关信息。
  • .play() 和 .reverse() 方法非常不言自明，因为它们使 timeline 转到 forwards 或 向后分别。
• 就是这样。

希望这会有所帮助。