javascript - TweenLite 动画突然改变元素的位置？

Question

首先，您可以在这个 JSFiddle 中找到我的代码的简化演示也在问题下方。我发现我的问题按照我在 Google Chrome 中描述的方式发生，所以如果您打算尝试修复该错误，请使用该浏览器。如果代码没有得到很好的简化，我深表歉意；请考虑这是一个更大元素的片段。

我正在开发一个使用 JQuery 和 GreenSock 的 TweenLite 制作动画的网络应用。

这个应用程序包含一些控制一切的菜单，这些菜单在使用 bodyChange() 函数之间转换。这个函数有两个参数:

• nextOrPrev，根据值运行一个或另一个动画提供("next" 或 "prev")。只有 "next" 动画已经完成，但现在这并不重要。 "prev" 动画尚未使用，只是发出一个 alert("prev")。
• 主体函数。提供的函数将用该菜单所需的元素填充正文，并将它们包装在 #bodyWrap 中。

在我为您提供的演示中，只有两个菜单:第一个，mainMenu，只有一个#playButton。当您单击它时，将使用以下参数调用 bodyChange() 函数:("next", playSettingsBody)，playSettings 是第二个菜单。

这就是问题所在:当您单击 playButton 时，按钮会在屏幕上上升，然后执行 TweenLite 动画。但是，我不明白为什么按钮会“跳起来”，而不是停留在同一个地方并执行动画。这可能是由于一个小错误。这是什么？

感谢您的帮助。

mainMenuBody();

function mainMenuBody() {
	$("body").append(
	//BUTTONS
	"<div id='playButton' class='mainButton'><div class='buttonText mainButtonText text'>PLAY</div></div>"
	);
	//WRAP
	$("body").wrapInner("<div id='bodyWrap'></div>");
	//BINDS
	$("#playButton").bind("click", function() {
		bodyChange("next", playSettingsBody);
	});	
}

function bodyChange(nextOrPrev, bodyFunction) {

	switch (nextOrPrev) {
		case "next":
			//ANIMATION AND BODY CHANGE
			TweenLite.to($("#bodyWrap"), .4, {
					ease: Power2.easeIn,
					transform: "rotateY(90deg)",
					onComplete: function(){
						$("body").empty();
					//NEW STUFF
						bodyFunction();
						TweenLite.from($("#bodyWrap"), .4, {
							ease: Power2.easeOut,
							transform: "rotateY(90deg)"
						});
					}
			});
			//END OF ANIMATION AND BODY CHANGE
			break;

		case "prev":
			alert("prev");
	}
}

function playSettingsBody() {
	$("body").append(
	"<p class='text' id='CYTText'>This is the second menu!</p>"
  );
}

body{
	background-image: url("../resources/pics/Vignette2.png");
    background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	background-color: #02BFC1;
	overflow:hidden;
	margin: 0;
	
	}

.text {
	color: #FFFFFF;
	font-family:Bebas Neue;
	-webkit-user-select: none;
	cursor: default;
	text-shadow: 3px 3px 2px rgba(0,0,0,0.2);

	}
  
 .mainButton {
	-webkit-transform:scale(1);
	width: 200px;
	height: 200px;
	border: 10px solid #F1F2F0;
	text-align:center;
	background-color: #F37C2B;
	/*background:#5F4A21;*/
	display: table;
	position: absolute;
	margin: auto;
	top: 150px;
    bottom: 0;
	-webkit-transition: all 0.5s ease;
	cursor: pointer;
	box-shadow: 0px 0px 30px rgba(0,0,0,0.4);
	}
  
 .mainButtonText {
	position: relative;
	display:table-cell;
	vertical-align:middle;
	-webkit-transform:scale(1);
	font-size: 90px;
	text-shadow: 4px 4px 2px rgba(0,0,0,0.2);
	-webkit-transition: all 0.5s ease;
	}

<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

Answer 1

这个问题是在您的.mainButton 类中引起的。您的代码看起来有点像这样。

.mainButton {
    position: absolute;
    top: 150px;
    bottom: 0;
    //rest
}

通过删除行 bottom: 0; 你的 JSFiddle现在按预期工作。但是，如果您改为删除行 top: 150px; 并留在 bottom: 0 中，问题仍然存在。不幸的是，我无法对此提供解释。可能值得在 GSAP 论坛上发布一个问题，询问为什么在使用 bottom 定位时会发生这种情况，但在使用 top

时却不会发生这种情况

编辑
由于您需要 bottom: 0 而我无法修复您的代码，因此我编写了一个使用 GSAP 插件 Timeline 的示例。你可以看到这个JSFiddle或下面的代码示例。

var tl = new TimelineMax();
tl.pause();
tl.fromTo($("#click"), 1, {rotationY: 0, ease: Power2.easeOut}, {rotationY: 90, transformOrigin:"right", ease: Power2.easeOut})
  .set($("#click2"), {css:{display: "table"}}, "-=0.6")
  .fromTo($("#click2"), 1, {rotationY: -90, ease: Power2.easeOut}, {rotationY: 0, transformOrigin:"left", ease: Power2.easeOut}, "-=0.6");

$("#click").click(function() {
  tl.play();
});

$("#click2").click(function() {
  tl.reverse();
});

* {
  margin: 0;
  padding: 0;
}

body {
  background-image: url("../resources/pics/Vignette2.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-color: #02BFC1;
  overflow: hidden;
}

div.one, div.two {
  position: absolute;
  bottom: 0;
  height: 200px;
  width: 200px;
  background: #F37C2B;
  text-align: center;
  display: table;
  cursor: pointer;
  border: 10px solid #F1F2F0;
}
div.one .text, div.two .text {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  color: #FFFFFF;
  font-family: Bebas Neue;
  font-size: 90px;
}
div.two {
  display: none;
  border-color: transparent;
  background: none;
}
div.two .text {
  font-size: 40px;
}

<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

<div id="click" class="one">
  <div class="text">
    Play
  </div>
</div>

<div id="click2" class="two">
  <div class="text">
    Second Menu
  </div>
</div>