web-dev-qa-db-ja.com

jQueryでtranslate3dをアニメーション化する

Jquery2.1.1でtranslate3dをアニメーション化しようとしています。 10秒で。そして、アニメーションが完成したら、私に警告してもらいたいです。しかし、問題はそれがアニメーション化されないことです。新しいcssに即座に変更されます。

これを手伝ってくれるヒーローはいますか？

私が今使っているコード：

$( ".circle" ).animate({ textIndent: 100 }, {
    duration : 10000,
    step : function() {
      $(this).css("transform","translate3d(0px, 320px, 0px)"); 
    }, 
    complete : function() {
        alert("completed the animation");
    }
},'linear');
jquerycssanimationtransform
6
Rob Boerman

基本的に、animateとtransformでは、jQueryのanimate関数のstep関数を使用する必要があります。これは次のようになります。

$('.animate').animate({
    'opacity': '320'
}, {
    step: function (now, fx) {
        $(this).css({"transform": "translate3d(0px, " + now + "px, 0px)"});
    },
    duration: 10000,
    easing: 'linear',
    queue: false,
    complete: function () {
        alert('Animation is done');
    }
}, 'linear');

Text-indentを個別に設定する必要がありますが、基本的に間違っていたのは、step関数が呼び出されるたびに、値がそのままではなく、320pxに直接設定されることでした。これは、2つの別個の関数を持ち、重要でないcssルールを使用して、アニメーション曲線全体に必要な値を作成することで対処できます。また、2つのアニメーションが次々に発生するのではなく、同時に発生するように、キューをfalseに設定する必要があります。

コードの最終スニペットは次のようになります。

$('.animate').animate({
    'opacity': '320'
}, {
    step: function (now, fx) {
        $(this).css({"transform": "translate3d(0px, " + now + "px, 0px)"});
    },
    duration: 10000,
    easing: 'linear',
    queue: false,
    complete: function () {
        alert('Animation is done');
    }
}, 'linear');
$(".animate").animate({ textIndent: 100 }, {
    duration : 10000,
    easing: 'linear',
    queue: false
});

これが実用的なフィドルです：

http://jsfiddle.net/Hive7/1qu2qxqh/

9
Hive7

Css3遷移にはjquery.transitjQueryプラグインを使用できます。

$('.box').transition({ rotate: '45deg' });
$('.box').transition({ scale: 2.2 });
$('.box').transition({ skewY: '30deg' });
$('.box').transition({
  perspective: '100px',
  rotate3d: '1,1,0,180deg'
});

非常に優れたプラグインと多くの機能

遅延、オプションの単位、ベンダープレフィックス、チェーンとキューイング、代替のイージング/デュレーション構文、相対値、変換の起点とイージング

デモはこちら

3
Mohamad Shiralizadeh