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

Question

首先，您可以在此JSFiddle以及问题下方找到我的代码的简化演示。我发现我的问题就像我在Google Chrome中描述的那样，所以如果您打算尝试修复错误，请使用该浏览器。如果代码不是很简单，我很抱歉;请考虑这是一个更大项目的片段。

我正在开发一个使用JQuery和GreenSock的TweenLite进行动画制作的webapp。

此应用程序包含一些控制所有内容的菜单，这些菜单在使用bodyChange()功能之间进行转换。该函数有两个参数：

• nextOrPrev，根据值运行一个或另一个动画 提供（"next"或"prev"）。只有"next"动画已经完成，但现在这并不重要。尚未使用的"prev"动画只会发出alert("prev")。
• bodyFunction。提供的功能将为身体填充该菜单所需的元素，并将其包装在#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并且我无法修复您的代码，因此我编写了一个使用Timeline（一个GSAP插件）的示例。您可以看到此JSFiddle或下面的代码示例。

＆＃13;

＆＃13;

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

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;