0
我使用了GreenSock-TweenMax編寫了一個在Firefox和Safari中正常工作的遮罩動畫。然而,在Chrome中沒有動畫效果,(代碼實際上是在工作)我找不出原因。TimelineLite(TweenMax)不適用於Chrome
var n = 200;
function buildShield(s) {
var timeline = new TimelineLite();
n = n+s;
var to = {
y: n,
// ease: Linear.easeOut
};
var duration = 2;
timeline.to("#curtain", duration, to, 1);
}
function increase(n){
\t buildShield(-40);
}
function decrease(){
\t buildShield(20);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<svg version="1.1" id="mark-shield" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
\t width="286px" height="311px" viewBox="0 0 286 311" enable-background="new 0 0 286 311" xml:space="preserve">
\t <defs>
\t <mask id="mask">
\t \t <polygon fill="white" points="143.705,32.138 262.554,73.118 243.826,227.782 143.705,282.861 44.218,228.222 25.821,73.889 "/>
\t </mask>
\t <g id="curtain" style="transform:translateY(260px);">
\t <rect id="cr-left" x="9.875" y="28.999" fill="#41B3A1" width="134.312" height="263.573"/>
\t <rect id="cr-right"x="144.188" y="28.999" fill="#269D8A" width="138.479" height="263.573"/>
\t </g>
\t </defs>
<polygon fill="#D7D5D3" stroke="#A9A7A5" stroke-width="8" stroke-miterlimit="10" points="143.641,15.249 278.5,61.75
\t 257.25,237.25 143.641,299.75 30.75,237.75 9.875,62.625 "/>
\t <polygon fill="#c9c9c9" points="143.705,32.138 143.705,282.861 243.826,227.782 262.554,73.118 "/>
\t <use mask="url(#mask)" xlink:href="#curtain"/>
</svg>
<div id="btn-in" onClick="increase(100)" style="background: grey; cursor:pointer;">increase 100</div>
<div id="btn-de" onClick="decrease()" style="background: grey; cursor:pointer; margin-top:10px;">decrease 60</div>
爲什麼不將此情況報告給使用GreenSock? –
我也有類似的問題。我的動畫效果很好,直到我升級了我的chrome版本。請在此發佈您的發現。 – SirBT