時間軸的逆轉導致時間軸的一部分在下一次播放時「丟失」

Question

以下代碼創建了一個GSAP TimelineMax，它在第一次播放中完美地起作用。但是，在時間軸逆轉並且您再次播放後，TimelineMax的後半部分會「丟失」。

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

.box { 
 
    width: 200px; 
 
    height:100px; 
 
    text-align:center; 
 
    background: black 
 
} 
 

 
span { 
 
    color: white 
 
} 
 

 
.short { 
 
    display: block 
 
} 
 

 
.long { 
 
    display: none 
 
}

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

這裏是一個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});