TimelineLite（TweenMax）不適用於Chrome

我使用了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>

來源

2016-07-19 Jim Liu

爲什麼不將此情況報告給使用GreenSock？ –

我也有類似的問題。我的動畫效果很好，直到我升級了我的chrome版本。請在此發佈您的發現。 – SirBT

貌似你試圖動畫#curtain這是一個SVG圖形元素，這是一個SVG <defs>元素中。

<defs>元素不是直接用CSS呈現。在一個DEFS定義

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

圖形元素將不會被直接呈現。您可以使用元素在視口上的任何位置呈現這些元素。

GSAP使用CSSPlugin默認，但因爲你的SVG <defs>元素中的定位元素，你必須使用GSAP AttrPlugin。

所以你必須直接動畫屬性，用attr:{}來包裝這些屬性，以顯示你想要動畫屬性。

裹y在attr:{}

var n = 200; 
function buildShield(s) { 
    var timeline = new TimelineLite(); 
    n = n+s; 
    var to = { 
     attr: {y: n}, // wrap y in attr:{} 
    }; 
    var duration = 2; 
    timeline.to("#curtain", duration, to, 1); 
} 

function increase(n){ 
    buildShield(-40); 
} 

function decrease(){ 
    buildShield(20); 
}

來源

2016-07-20 17:34:06

TimelineLite（TweenMax）不適用於Chrome

回答

相關問題