动画translate3d与jQuery [英] Animate translate3d with jQuery

问题描述

我试图动画translate3d使用jQuery 2.1.1。在10秒内。然后，在动画完成的时候，我希望它提醒我。但问题是，它不动画。它只是瞬间切换到新的CSS。

有一些英雄，可以帮助我？

在code我现在使用：

  $（.circle）.animate（{textIndent：100}，{
    持续时间：10000，
    步骤：函数（）{
      $（本）的.css（改造，translate3d（0像素，320像素，0像素））;
    }，
    完成：功能（）{
        警报（完成了动画）;
    }
}，线性）;
 

解决方案

基本上与动画和改造你必须使用jQuery的animate函数的阶梯函数将看起来有点像这样：

  $（'动画'）。动画（{
    '不透明'：'320'
}，{
    步骤：功能（目前，FX）{
        $（本）的.css（{改造：translate3d（0像素，现在+ +像素，0像素）}）;
    }，
    持续时间：10000，
    宽松：线性，
    队列：假的，
    完成：功能（）{
        警报（'动画完成'）;
    }
}，线性）;
 

您必须单独设置文本缩进，但基本上是你的错误行为是每一个步骤调用该函数的值时间直接设置为320像素，而不是因为它去。这可以通过具有两个独立的功能，并使用不重要的CSS规则创建整个动画曲线所需要的值来处理。还需要的队列设置为假，使得两个动画发生在同一时间，而不是一个接一个

code的最后一个片段是这样的：

  $（'动画'）。动画（{
    '不透明'：'320'
}，{
    步骤：功能（目前，FX）{
        $（本）的.css（{改造：translate3d（0像素，现在+ +像素，0像素）}）;
    }，
    持续时间：10000，
    宽松：线性，
    队列：假的，
    完成：功能（）{
        警报（'动画完成'）;
    }
}，线性）;
$（动画），动画（{textIndent：100}，{
    持续时间：10000，
    宽松：线性，
    队列：假的
}）;
 

下面是工作提琴：

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

I'm trying to animate translate3d with Jquery 2.1.1. in 10 seconds. Then, when the animation is complete, I want it to alert me. But the problem is that it does not animate. It just changes instantly to the new css.

Is there some hero that can help me with this?

The code i use now:

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

解决方案

Basically with animate and transform you have to use the step function of the animate function of jQuery which will look a bit like this:

$('.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');

You would have to set the text-indent separately but basically what you were doing wrong was that every time the step function was called the value was set straight to 320px instead of as it goes. This can be tackled by having two separate functions and using unimportant css rules to create the values needed across the animation curve. You also need to set the queue to false so that the two animations happen at the same time and not one after the other

The final snippet of code would look like this:

$('.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
});

Here is a working fiddle:

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

这篇关于动画translate3d与jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！