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

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。

感谢帮助！

最佳答案

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类，因此已将其从解决方案中删除。
另外，在on元素上切换的.menu-section类似乎也不必要。我删除了它，但保留了.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()) { timeline.play(); } else { timeline.reverse(); }。
正在检查的条件是.reversed()的timeline属性。您会注意到，在初始化new TimelineMax(...)时，我在其上设置了reversed: true属性。它的作用是，在将所有补间添加到timeline之后，它的行为就好像timeline立即反转一样，使得timeline的方向已被翻转。在上面共享的TimelineMax文档链接中了解有关此内容的更多信息。
.play()和.reverse()方法很容易解释，因为它们分别使timeline前进或后退。

就是这样。

希望这可以帮助。

timelineMax

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