矩形へのトランジション遷移の追加

Question

私は、d3を使ってダイナミックに、またはrectを使ってCSSを使って素敵なトランジションをしようとしていますが、それを行う方法の良い例を見つけるのは少し幸運です。

アイデアは、レンダリング時に棒グラフを下から上に伸ばしたいという考えです。

グラフはVegaを使用してレンダリングされますが、私はまだトランジションが組み込まれていないと考えています。したがって、ライブラリの外で行う他のオプションが必要です。

私はCSSのアニメーションを使用しようとしましたが、それはいくつかの奇妙なレンダリングの問題があり、また、あなたのCSSのアプローチは、現在唯一のChromeで動作します

rect { 
    animation: bar-fill 2s linear; 
} 

@keyframes bar-fill { 
    0% { height: 0; } 
} 

https://jsfiddle.net/zg2hnr2x/3/

Answer 1

トップに下いうし、上から下へ行きます。 heightは公式にCSSでアニメーション化できる属性（まだ）ではありません。

SVGsの座標原点は左上にあり、そうxので、それは上から下にされて成長するため、y<rect>の座標は、左上にもあります。 rectの右下はx+width、y+heightです。

SVG要素をアニメーション化するためにクロスブラウザの方法が必要な場合は、利用可能な多くのJS SVGアニメーションライブラリの1つを調べるとよいでしょう。