3

画像をアニメーション化する必要がありますが、CSS 変換を使用したいと考えています。解決策がこれである以前の質問を見つけました：

jsフィドル

私はこのように変更します：

jsフィドル

両方を変換する必要があるため、x と y の値を渡す方法がわかりません。

この方法は機能しません:

$('#box').animate({  fake: [100,50] }, {
    step: function(now,fx) {
       $(this).css('-webkit-transform','translate(' + now[0] + 'px,' + now[1] + 'px)'); 
    },
    duration:'slow'
},'linear');
4

3 に答える 3

2 
;(function($) {
            var delay = 0;
            $.fn.translate3d = function(translations, speed, easing, complete) {
                var opt = $.speed(speed, easing, complete);
                opt.easing = opt.easing || 'ease';
                translations = $.extend({x: 0, y: 0, z: 0}, translations);

                return this.each(function() {
                    var $this = $(this);

                    $this.css({ 
                        transitionDuration: opt.duration + 'ms',
                        transitionTimingFunction: opt.easing,
                        transform: 'translate3d(' + translations.x + 'px, ' + translations.y + 'px, ' + translations.z + 'px)'
                    });

                    setTimeout(function() { 
                        $this.css({ 
                            transitionDuration: '0s', 
                            transitionTimingFunction: 'ease'
                        });

                        opt.complete();
                    }, opt.duration + (delay || 0));
                });
            };
        })(jQuery);

このようにして、translateZ も使用できます。

ソースhttp://cameronspear.com/blog/animating-translate3d-with-jquery/

于 2013-10-14T11:16:55.203 に答える
1

この方法は機能しているように見えますが、より良い解決策が存在する可能性があります

jsfiddle の例

var offX, offY;

$('#box').animate({  fake1: 150, fake2: 100 }, {
  step: function(now,fx) {

    if (fx.prop === "fake1") {
      offX = now;
    } else if (fx.prop === "fake2") {
      offY = now;
      $(this).css('-webkit-transform','translate('+ offX +'px,'+ offY +'px)');
    }
  },
  duration:300
},'linear');
于 2013-04-10T08:00:31.013 に答える
1 
$('#box').animate({  fake: 200, fake2: 10 }, {
    step: function(now,fx) {
      $(this).css('-webkit-transform','translate('+now+'px,'+now+'px )'); 
    },
    duration:'slow'
},'linear');

jsフィドル

于 2013-04-09T23:31:42.427 に答える