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课程的需要，所以我已将其从我的解决方案中删除。
另外，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(); }。
- 正在检查的条件是timeline的 .reversed() 属性。您会注意到在初始化new TimelineMax(...)时，我在其上设置了reversed: true属性。它的作用是，在将所有补间添加到timeline之后，它的行为就好像timeline被立即反转，以便timeline的方向被翻转。在我上面分享的TimelineMax文档链接中了解更多相关信息。
- .play() 和 .reverse() 方法非常明确，因为它们使timeline转转发< / em>或向后。

就是这样。

希望这有帮助。

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

1 个答案: