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

回答

相关问题