使用GSAP和TweenMax同时触发多个补间

Question

我想离开jQuery for animation，所以我一直在使用GSAP。我试图弄清楚如何在元素及其子元素上触发多个动画。基本上我想给#navicon一个“720软木塞”效果，这个效果很好，并且淡化/切换图标给这个#navicon容器的孩子，这个容器完全不起作用。

如果我只使用jQuery，我可能只需要根据需要添加多个类，并使用它们来触发一些CSS3转换。但是，GSAP似乎是really fast。

我已经非常彻底地阅读了GSAP文档。我看到如何使用“时间轴”链接补间，但我不知道如何基于一个事件在不同的元素上触发多个补间。

到目前为止，这是我的代码：

var toggleMobiMenu = function() {
    $('#navicon').on('click touchstart', function() {
        TweenMax.to($(this), 0.5, { rotationY: 720, rotationX: -720 })
            .to($(this).find('#open'), 0.5, { opacity: 0 })
            .to($(this).find('#closed'), 0.5, { opacity: 1 });
    });
}
toggleMobiMenu();

和here是同样的小提琴。有谁知道如何一次性补间所有这3个元素？

Answer 1

代码中存在两个问题：

• to 的 TweenMax 方法是一种静态方法，但它是什么呢 return是 TweenMax 的实例。阅读更多关于 静态和实例方法之间的区别 here这基本上是一个 语言不可知的概念。因为，在这种情况下，实例不会 您可以使用 to 方法as per the docs作为您的代码 符。
• 代码的第二个问题是您使用 find() 方法查找 #open 和 #close <单击 #navicon 元素中的/ strong>元素，但根据您的HTML结构，不存在 #open 之类的内容 和 #close 元素。相反，您有 #navicon-open 和 #navicon-close 元素。把它们而不是旧的应该解决这个问题。

总而言之，您的代码应该如下所示：

var toggleMobiMenu = function() {
    $('#navicon').on('click touchstart', function() {
        TweenMax.to($(this),0.5,{rotationY:720,rotationX:-720});
        TweenMax.to($(this).find('#navicon-open'),0.5,{opacity:0});
        TweenMax.to($(this).find('#navicon-close'),0.5,{opacity:1});
    });
}
toggleMobiMenu();

但是如果我理解正确的话，你真正要做的就是想出一个向前或向后移动的动画，即每次点击图标时切换。所以我在下面的代码片段中重新编写了代码，只要您想到这一点：

<强> 段：

＆＃13;

＆＃13;

var navIcon=$('#navicon');
var navIconOpen=$('#navicon-open');
var navIconClose=$('#navicon-close');
var timeline=new TimelineMax({paused:true,reversed:true});
var duration=.6;
var ease=Power2.easeOut;
var rotation=360;
var init=function(){
    timeline.to(navIcon,duration,{rotationY:rotation,rotationX:-rotation,ease:ease},0);
    timeline.to(navIconOpen,duration,{opacity:0,ease:ease},0);
    timeline.to(navIconClose,duration,{opacity:1,ease:ease},0);
    navIcon.on('click touchstart',function(){
        toggleMobileMenu();
    });
};
var toggleMobileMenu=function(){
    timeline.reversed()?timeline.play():timeline.reverse();
};
//
init();

＆＃13;

#navicon {
	height:45px;
	width:45px;
	border:#000 3px solid;
	border-radius:50%;
	margin:5px 35px 0 0;
	position:relative;
	float:right;
}

#navicon i {
	color:#000;
	top:8px;
	left:11px;
	font-size:24px;
	position:absolute;
}

#navicon #navicon-open {
	opacity:1;
}

#navicon #navicon-close {
	opacity:0;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<a id="navicon" href="javascript:void(0);">
    <i id="navicon-open" class="fa fa-bars"></i>
    <i id="navicon-close" class="fa fa-times"></i>
</a>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助。