如何正确地动画一个GSAP菜单

How to animate correctly a GSAP menu?

本文关键字：一个 GSAP 菜单 正确地 动画      更新时间：2023-09-26

你好，当我关闭菜单并再次打开它时，我需要重置动画。我该怎么做呢?动画只在我第一次打开菜单时工作。

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.

谢谢你的帮助!

这个是你想要的结果吗?

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向前或向后。

相关文章：