Question

以下代码创建了一个GSAP TimelineMax，可以在第一次播放时完美运行。但是，在时间线颠倒并再次播放之后，TimelineMax的后半部分将失去＆＃34; <34>。

＆＃13;

var tl = new TimelineMax();

$(".box").hover(function(){
  tl = new TimelineMax();
  tl.to($(this).children("span.short"), 0.5, {scale: 0})
    .set($(this).children("span.short"), {css:{display: "none"}})
    .set($(this).children("span.long"), {css:{display: "block"}})
    .from($(this).children("span.long"), 0.5, {scale: 0});
},function() {
  tl.reverse();
});

＆＃13;

.box {
  width: 200px;
  height:100px;
  text-align:center;
  background: black
}

span {
  color: white
}

.short {
  display: block
}

.long {
  display: none
}

＆＃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 class="box">
  <span class="short">S</span>
  <span class="long">Long</span>
</div>

＆＃13;

如果你愿意使用，我可以使用JSFiddle。

我非常感谢您在修复时间轴方面提供的任何帮助，以使其正常运行。

注意：您需要将鼠标悬停在该框上才能看到动画

Answer 1

您应该使用fromTo功能。否则，scale的值不会还原为1。

查看here。

我改变了这一行

.from($(this).children("span.long"), 0.5, {scale: 0});

要

.fromTo($(this).children("span.long"), 0.5, {scale: 0}, {scale: 1});

时间线的逆转导致时间线的一部分进入＆＃34;缺失＆＃34;在下一场比赛

1 个答案: