javascript - JQuery 设置 CSS Transform, Translate 类中的属性

Question

我似乎无法使用 Jquery 设置 transform 的 CSS 属性。

Here is my Code: https://jsfiddle.net/op7Lsvdp/

这两个是我试过都不成功的方法。

$('.slideToCart').css({
  '-webkit-transform' : 'translate(left, top)',
  '-moz-transform'    : 'translate(left, top)',
  '-ms-transform'     : 'translate(left, top)',
  '-o-transform'      : 'translate(left, top)',
  'transform'         : 'translate(left, top)'
});

$('.slideToCart').css('transform', 'translate(50px, 50px)');
$('.slideToCart').css('-webkit-transform', 'translate(50px, 50px)');

谢谢你，

Answer 1

我认为 css 方法的重要之处在于它不会改变您的 class 属性，但它会改变对象的 style 属性你正在调用它。

这样做会:

$( document ).ready(function() {
    $('.buttonHolder').click(function(){
        $(this).find("span").toggleClass('fadeText');
        var button = $(this).find("button");
        button.toggleClass('shrink');

        var position = $('.target').position();
        var left = position.left + 'px';
        var top = position.top + 'px';

        var buttonHolder = $(this);

        setTimeout(function() {
            buttonHolder.css({'transform' : 'translate(' + left +', ' + top + ')'});
        }, 1000);
    });
});