gsap和css在同一時間過渡可能嗎？

如何在一個也具有css轉換屬性的dom元素上使用GSAP TweenMax yoyo補間？默認情況下元素會執行一次補間（ff，chrome - 不是），但不會像yoyo那樣重複？除了刪除css轉換之外，是否有解決方法？gsap和css在同一時間過渡可能嗎？

HTML: 
<ol > 
     <li class="withcsstransition">with css transition</li> 
     <li >without css transition </li> 
</ol> 

CSS: 
.withcsstransition { 
    transition: all 0.8s ease; 
} 
.active { 
    background: #AAAAAA; 
} 

JS: 
TweenMax.fromTo('li', 0.3, { 
    className: "-=active" 
}, { 
    className: "+=active", 
    yoyo: true, 
    repeat: -1, 
});

codepen example

來源

2016-02-29 cologne

不太確定預期的行爲是什麼。你能詳細說明一下嗎？ –

@TahirAhmed具有css過渡風格的元素也應該遵循yoyo tween。請查看codepen示例，其中一個項目具有bg顏色補間，而另一個項目沒有。唯一的區別是CSS轉換規則。謝謝。 – cologne

在transition CSS屬性替換all專門針對一個屬性，即min-height。所以transition線你的CSS應該是這樣的：

... 
transition: min-height 0.8s ease; 
...

我不完全理解爲什麼它後面。在我看來，transition屬性的all關鍵字以某種方式覆蓋並優先於任何後來應用於任何元素的CSS屬性。

來源

2016-03-02 01:17:41

感謝塔希爾的建議，這引導我進一步調查。我知道tweenmax補間發生在所有列表元素上，但是使用css規則的時間而不是它自己的補間（有線）時間。我發現通過延遲tweenmax補間的重複，讓css規則有足夠的時間完成。我編輯了[codepen示例]（http://codepen.io/anon/pen/YqPZeG），這樣就可以看到兩個補間相鄰。 – cologne

gsap和css在同一時間過渡可能嗎？

回答

相關問題