如何正确设置GSAP菜单的动画? [英] How to animate correctly a GSAP menu?

问题描述

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

Holla, I need to reset the animation when I close menu and open it again. How can I do that? Animation works only the first time when I open menu.

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

感谢帮助！

推荐答案

是 这 您追求的结果是什么?

Is this the kind of result you were after?

JavaScript:

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();
});

有些事情已经改变，所以这里是详细信息:

A few things have changed so here are the details:

• 首先，我没有看到需要hidden类，因此已将其从解决方案中删除.
• 此外，.menu-section元素上的on类切换似乎也没有必要.我删除了它，但保留了.menu-section CSS规则中定义的属性.
• 最有趣的部分是JavaScript.
• 您基本上需要 TimelineMax 进行操作.
• 根据您在JavaScript设置面板中的导入情况，我假设您对TimelineMax(和TimelineLite)的含义有所了解.无论如何，TimelineLite都是关于构建和管理TweenLite，TweenMax，TimelineLite和/或TimelineMax实例的顺序，而TimelineMax是TimelineLite的扩展，为其增加了更多功能
• 因此，代码中发生的事情是TimelineMax实例已被初始化，已向其中添加了补间，然后在单击.menu-toggle按钮元素时，此时间轴要么被播放 或 reversed .
• timeline.reversed() ? timeline.play() : timeline.reverse();行基本上是if条件的简化版本，它比个人喜好多于其他任何方面，没有性能提升或我所知道的任何东西.在普通的if子句中，它的编写应如下所示:
  • if (timeline.reversed()) { timeline.play(); } else { timeline.reverse(); }.
  • 正在检查的条件是 .reversed() timeline的a> 属性.您会注意到，在初始化new TimelineMax(...)时，我在其上设置了reversed: true属性.它的作用是，在将所有补间添加到timeline之后，它的表现就好像timeline立即反转一样，使得timeline的方向已被翻转.在我上面共享的TimelineMax文档链接中了解有关此内容的更多信息.
  • .play() .reverse() 方法是非常自我的解释，因为它们分别使timeline向前 或向后.
  • First and foremost, I didn't see the need for the hidden class so I have removed it from my solution.
  • Plus, the on class toggled on the .menu-section element seemed pretty unnecessary as well. I removed it, but kept the properties defined on the .menu-section CSS rule.
  • On to the fun part, the JavaScript.
  • You basically needed a TimelineMax to operate upon.
  • Judging by the imports you had in the JavaScript settings panel, I am assuming that you have some idea of what TimelineMax (and TimelineLite) are all about. By in any case, TimelineLite is about building and managing sequences of TweenLite, TweenMax, TimelineLite, and/or TimelineMax instances and TimelineMax is an extension of TimelineLite, adding more power to it.
  • So, what happens in the code is that a TimelineMax instance has been initialised, tweens have been added to it and then, upon clicking of the .menu-toggle button element, this timeline is either played or reversed.
  • The line timeline.reversed() ? timeline.play() : timeline.reverse(); is basically a shortened, fancy version of an if condition and it comes to down to personal preference more than anything else, no performance gain or anything that I am aware of. In a normal if clause, it would have been written like this:
    • if (timeline.reversed()) { timeline.play(); } else { timeline.reverse(); }.
    • The condition that is being checked is .reversed() property of timeline. You would notice that while initialising new TimelineMax(...), I set reversed: true property on it. What it does is that after all the tweens are added to timeline, it would behave as if timeline was immediately reversed such that the orientation of the timeline had been flipped. Read more about it in the TimelineMax documentation link I shared above.
    • The .play() and .reverse() methods are pretty self-explanatory as they make the timeline go forwards or backwards respectively.

    希望这会有所帮助.

    这篇关于如何正确设置GSAP菜单的动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！