2

d3.jsで通常の左cssの代わりにCSS3Webkittranslate3dを使用する方法を知っている人はいますか？iPhoneでは、translate3dの実行速度が速く、HTML要素のリリース後の移行時に実行する必要があります。

これが左のcssの私のコードです：

d3.select("#myHTMLElem").transition()
    .style("left", myNewPosX) + "px")
    .duration(500)
    .ease("cubic-in-out")
    .each("end", function(d) {
        // Do something after
});

JQueryには何かがありますが、このプロジェクトでは引き続きd3.jsを使用したいと思います。leftプロパティの代わりにtranslate3dを使用して前のコードを作成する方法はありますか？

ありがとう

4

1 に答える 1

6

これが私のやり方です。スムーズで機能的なトランジションのために、エレメントでトランジションが実行される前に、style 属性にデフォルト値を適用してください。

デフォルトのスタイル (移行前):

var svg = d3.select("div#wrapper").append("svg").append("g").attr("id", "usg").attr("style", function () {
    return "-webkit-transform: perspective(800) scale(1) scale3d(1, 1, 1) rotate3d(1, 0, 0, 0deg) translate3d(0, 0, 0);";
});

トランジション スタイル (デフォルト値を変換):

d3.select("#usg").transition().duration(2000).attr("style", function () {
    return "-webkit-transform: perspective(800) scale(1) scale3d(1, 1, 2) rotate3d(1, 0, 0, 55deg) translate3d(0px, 198px, 0px);";
});
于 2012-11-02T18:58:03.087 に答える