2

jQuery animate と CSS3 animate を比較して実験してきましたが、2D / 3D 変換をテストして、どちらが優れているかを確認したいとも考えていました。

CSS3 translate3d が機能しない理由を誰か知っていますか? デスクトップとモバイルで試してみました。

どんな助けでも大歓迎

jsフィドル

HTML

<div id="container1" class="container">transition</div>
    <div id="container2" class="container">translate</div>
    <div id="container3" class="container">translate3d</div>
    <div id="container4" class="container">jQ animate</div>

CSS

    .container          {position:absolute; left:20px; width:80px; height:80px; padding:5px;}

/* transition */
#container1         {top:20px; background:red;
                    -webkit-transition:all 0.3s linear;
                    -moz-transition:all 0.3s linear;
                    -o-transition:all 0.3s linear;
                    -ms-transition:all 0.3s linear;
                    transition:all 0.3s linear;}

#container1.on      {left:250px} /* It moves if from pos absolute of parent, the body tag in this example */



/* 2D translate */
#container2         {top:120px; background:yellow;
                    -webkit-transition:all 0.3s linear;
                    -moz-transition:all 0.3s linear;
                    -o-transition:all 0.3s linear;
                    -ms-transition:all 0.3s linear;
                    transition:all 0.3s linear;}

#container2.on      {-webkit-transform: translate(230px);
                    -moz-transform: translate(230px);
                    -o-transform: translate(230px);
                    -ms-transform: translate(230px);
                    transform: translate(230px);}  /* It moves if from the starting point, 20px left in this example */



/* 3D - translate */
#container3         {top:220px; background:lime;
                    -webkit-transition:all 0.3s linear;
                    -moz-transition:all 0.3s linear;
                    -o-transition:all 0.3s linear;
                    -ms-transition:all 0.3s linear;
                    transition:all 0.3s linear;}

#container3.on      {-webkit-transform: translate3d(230,0,0);
                    -moz-transform: translate3d(230,0,0);
                    -o-transform: translate3d(230,0,0);
                    -ms-transform: translate3d(230,0,0);
                    transform: translate3d(230,0,0);}  /* It moves if from the starting point, 20px left in this example */



/* jQuery Animate */
#container4         {top:320px; background:orange;}

jQuery

    $('#container1').click(function()
    {
        $(this).toggleClass('on');
    })

    $('#container2').click(function()
    {
        $(this).toggleClass('on');
    })

    $('#container3').click(function()
    {
        $(this).toggleClass('on');
    })

    $('#container4').toggle(function()
    {
        $(this).animate({'left':'250px'});

    }, function()
    {
        $(this).animate({'left':'20px'});
    })
4

1 に答える 1

5

長さの単位がありませんpx。

css でこれを使用します。

#container3.on {
    -webkit-transform: translate3d(230px, 0, 0);
    -moz-transform: translate3d(230px, 0, 0);
    -o-transform: translate3d(230px, 0, 0);
    -ms-transform: translate3d(230px, 0, 0);
    transform: translate3d(230px, 0, 0);
}  /* It moves if from the starting point, 20px left in this example */

ここにフィドルがあります

于 2012-11-13T13:31:49.420 に答える