Question

伪造一个YouTube风格的页面加载器的快速动画。

所以使用JQuery，我正在尝试动画： transform：translate3d（-100％，0,0）; 至 transform：translate3d（0％，0,0）;

所以从-100％到0％（从左到右）。

我现在正在使用它：

$('#progress-bar').animate({
    'opacity': '0'
}, {
    step: function (now, fx) {
        $(this).css('-webkit-transform',"translate3d(" + now + "%, 0, 0)");
    },
    duration: 5000,
    easing: 'linear',
    queue: false,
    complete: function () {
       // alert('Animation is done');
        $(this).fadeOut();
    }
}, 'linear');

我遇到的一些问题。如果我使用text-indent它会转到像素。如果我使用不透明度，它显然会淡化为0，但它们似乎都是从1％到0％的动画，而不是-100％到0％。

有关如何修复此演示的任何想法？

这是小提琴： https://jsfiddle.net/rhysyg03/xqrLmwmp/

感谢。

Answer 1

opacity的范围是0-1，因此now介于两者之间。尝试now * 100：

$('#progress-bar').animate({
    'opacity': '0'
}, {
    step: function (now, fx) {
        $(this).css('-webkit-transform',"translate3d(" + now*100 + "%, 0, 0)");
    },
    duration: 5000,
    easing: 'linear',
    queue: false,
    complete: function () {
       // alert('Animation is done');
        $(this).fadeOut();
    }
}, 'linear');

JQuery Animate Translate3D -100％到0％

1 个答案: