Прежде всего, вы можете найти упрощенную демонстрацию моего кода в этом JSFiddle, а также под вопросом. Я обнаружил, что моя проблема происходит так, как я описываю ее в Google Chrome, поэтому, если вы планируете исправить ошибку, используйте этот браузер. Прошу прощения, если код не очень упрощен; пожалуйста, подумайте, что это фрагмент из более крупного проекта.Анимация TweenLite внезапно меняет положение элементов?
Я работаю над webapp, который использует JQuery и TweenLite от GreenSock для анимации.
Это приложение состоит из нескольких меню, которые управляют всем, которые переходят между использованием функции bodyChange(). Эта функция имеет два параметра:
nextOrPrev, которая выполняет одну анимацию или другой на основе значения при условии ("next"или"prev"). Только анимация"next"выполнена, но это пока не важно. Анимация"prev", еще не использованная, просто испускаетalert("prev").bodyFunction. Предоставленная функция заполнит тело элементами, необходимыми для этого меню, и оберните их в#bodyWrap.
В демке я обеспечиваю вам есть только два меню: первый, mainMenu, только с #playButton. Когда вы нажимаете на нее, вызывается функция bodyChange() со следующими параметрами: ("next", playSettingsBody), playSettings является вторым меню.
В этом проблема: при нажатии кнопки playButton кнопка поднимается вверх по экрану, а затем выполняет анимацию TweenLite. Однако я не вижу, почему кнопка «прыгает», вместо того, чтобы оставаться в одном месте и выполнять анимацию. Вероятно, это связано с небольшой ошибкой. Что это?
Спасибо за любую помощь.
mainMenuBody();
function mainMenuBody() {
\t $("body").append(
\t //BUTTONS
\t "<div id='playButton' class='mainButton'><div class='buttonText mainButtonText text'>PLAY</div></div>"
\t);
\t //WRAP
\t $("body").wrapInner("<div id='bodyWrap'></div>");
\t //BINDS
\t $("#playButton").bind("click", function() {
\t \t bodyChange("next", playSettingsBody);
\t }); \t
}
function bodyChange(nextOrPrev, bodyFunction) {
\t switch (nextOrPrev) {
\t \t case "next":
\t \t \t //ANIMATION AND BODY CHANGE
\t \t \t TweenLite.to($("#bodyWrap"), .4, {
\t \t \t \t \t ease: Power2.easeIn,
\t \t \t \t \t transform: "rotateY(90deg)",
\t \t \t \t \t onComplete: function(){
\t \t \t \t \t \t $("body").empty();
\t \t \t \t \t //NEW STUFF
\t \t \t \t \t \t bodyFunction();
\t \t \t \t \t \t TweenLite.from($("#bodyWrap"), .4, {
\t \t \t \t \t \t \t ease: Power2.easeOut,
\t \t \t \t \t \t \t transform: "rotateY(90deg)"
\t \t \t \t \t \t });
\t \t \t \t \t }
\t \t \t });
\t \t \t //END OF ANIMATION AND BODY CHANGE
\t \t \t break;
\t \t case "prev":
\t \t \t alert("prev");
\t }
}
function playSettingsBody() {
\t $("body").append(
\t "<p class='text' id='CYTText'>This is the second menu!</p>"
);
}body{
\t background-image: url("../resources/pics/Vignette2.png");
background-repeat: no-repeat;
\t background-position: center center;
\t background-attachment: fixed;
\t background-color: #02BFC1;
\t overflow:hidden;
\t margin: 0;
\t
\t }
.text {
\t color: #FFFFFF;
\t font-family:Bebas Neue;
\t -webkit-user-select: none;
\t cursor: default;
\t text-shadow: 3px 3px 2px rgba(0,0,0,0.2);
\t }
.mainButton {
\t -webkit-transform:scale(1);
\t width: 200px;
\t height: 200px;
\t border: 10px solid #F1F2F0;
\t text-align:center;
\t background-color: #F37C2B;
\t /*background:#5F4A21;*/
\t display: table;
\t position: absolute;
\t margin: auto;
\t top: 150px;
bottom: 0;
\t -webkit-transition: all 0.5s ease;
\t cursor: pointer;
\t box-shadow: 0px 0px 30px rgba(0,0,0,0.4);
\t }
.mainButtonText {
\t position: relative;
\t display:table-cell;
\t vertical-align:middle;
\t -webkit-transform:scale(1);
\t font-size: 90px;
\t text-shadow: 4px 4px 2px rgba(0,0,0,0.2);
\t -webkit-transition: all 0.5s ease;
\t }<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>
Является ли мой редактировать что вы после? – Dan
Есть ли что-то, что я могу изменить в ответе, чтобы сделать его более подходящим ответом? – Dan
@ Dan Я пробовал ваш метод, но он не работал в основном проекте. Как я узнал на форуме GSAP, проблема на самом деле связана с querk в CSS и не имеет ничего общего с анимацией. Я решил не делать анимацию на данный момент, поскольку это не является существенным для общего проекта и устраняет проблему на более позднем этапе. Спасибо вам за ответ, так или иначе :) –