javascript - GSAP TweenLite 旋转但不是动画

Question

我对使用 TweenLite 有点陌生。正如您将在示例中看到的那样，我有一个向上滑动的 div，这一切都很好，我想旋转 div 本身，所以我使用旋转 18deg 但是，可以在动画之前旋转它，因为它看起来像它动画旋转一样向上滑动。所以我需要旋转出视野。

$(document).ready(function(){

  TweenLite.to("#slide_one .background",
    0.4, // set the speed
    {rotation:"18deg", top:"0" // set the angel and end position
  });

});

.container {
  display: block;
  width: 300px;
  height: 250px;
  border: 1px solid #000000;
  overflow: hidden;
  position: relative;
}
.background {
  position: relative;
  display: block;
  width: 200%;
  height: 200%;
  left: -100%;
  bottom: -300px;
}

.background.dark-blue {
  background: #071D49;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container">
  <div id="slide_one">
    <div class="background dark-blue"></div>
  </div>
</div>

Answer 1

对于任何想知道解决方案的人来说，您必须使用 set so does not animation

TweenLite.set(slide_one, { rotation: "18deg" });