CSSトランジションの塗りつぶしプロパティは一方向にしか作用しません

Question

私はSVGを保持するコンテナを持っています。クリックすると、他のSVGとともにSVGが変更されます。

最初のSVGは、他の一つは実際には同じ画像であるが、充填なし

.filled { 
    fill: blue; 
    transition: all .5s ease-in; 
} 

有します。

.unfilled { 
    transition: all .5s ease-in; 
} 

未塗りのSVGから塗りつぶしたSVGに移行すると、アニメーションが機能します。しかし、それは別の方法では動作しません。 （移行は瞬時に行われます）

何が問題なのか理解してもらえますか？

Answer 1

ease-inからease-in-outに変更してください。トランジションの

詳細情報はこちらです：http://www.w3schools.com/css/css3_transitions.asp

Answer 2

私はjQueryのを使用してクラスを変更し、動作しているようです。

JS

$('#changeme').on("click", function() { 
    $("#mySvg").attr('class', 'unfilled'); 
}); 

HTML

<svg width="100" height="100"> 
     <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" id="mySvg" class="filled" /> 
    </svg> 
    <button id="changeme">Change me</button>