如何正确设置 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 class 的必要性，因此我已将其从我的解决方案中删除。
此外，.menu-section 元素上的 on class 切换似乎也没有必要。我删除了它，但保留了 .menu-section CSS 规则中定义的属性。
关于有趣的部分，JavaScript。
你基本上需要一个 TimelineMax 来操作。
根据您在 JavaScript 设置面板中的导入判断，我假设您对 TimelineMax（和 TimelineLite）的含义有所了解。无论如何，TimelineLite 是关于 构建和管理 TweenLite、TweenMax、TimelineLite 的序列，and/or TimelineMax 实例 和 TimelineMax 是扩展TimelineLite，为它增添更多力量。
因此，代码中发生的事情是 TimelineMax 实例已被初始化，补间已添加到其中，然后在单击 .menu-toggle 按钮元素时，此时间线是播放或反转。
行 timeline.reversed() ? timeline.play() : timeline.reverse(); 基本上是 if 条件的一个缩短的、奇特的版本，它归结为个人喜好而不是其他任何东西，没有性能提升或我所知道的任何东西.在一个普通的 if 子句中，它应该是这样写的：
- if (timeline.reversed()) { timeline.play(); } else { timeline.reverse(); }.
- 正在检查的条件是 .reversed() 属性 of timeline。您会注意到，在初始化 new TimelineMax(...) 时，我在其上设置了 reversed: true 属性。它所做的是，在将所有补间添加到 timeline 之后，它的行为就好像 timeline 立即被反转，这样 timeline 的方向就被翻转了。在我上面分享的 TimelineMax 文档 link 中阅读更多相关信息。
- .play() and .reverse() 方法非常不言自明，因为它们使 timeline 前进向前或 分别向后
就是这样。

希望对您有所帮助。

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

How to animate correctly a GSAP menu?

javascript

gsap