jQuery设置CSS变换，翻译类中的属性答案

【问题标题】：JQuery set CSS Transform, Translate Properties in ClassjQuery设置CSS变换，翻译类中的属性
【发布时间】：2016-09-02 02:25:03
【问题描述】：

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

这是我的代码：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)');

谢谢，

【问题讨论】：

看看这种排序供应商前缀的方法（STEP3）stackoverflow.com/a/10237742/6213434

标签： javascript jquery html css css-animations

【解决方案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);
    });
});

【讨论】：

谢谢！即使使用预设数字而不是我的变量，我似乎仍然无法让它工作，知道为什么会这样吗？
您尝试过 buttonHolder 解决方案吗？
因为 v1.8 jquery 负责前缀，所以您只需要使用常规转换。看到一半了api.jquery.com/css
我明白了，我以为我实际上是在操纵班级，而实际上我只是在改变风格。一个我不敢相信我不理解的关键概念。投票和检查。
好吧，我认为我的回答暴露了问题所在，所以我原以为我的回答会被接受……而不是 Gevorg 在他的代码中使用我的建议。所以我有点生气。这些通常持续大约 10 秒......所以不用担心。谢谢你的回复:)

【解决方案2】：

您正在向.slideToCart 元素添加样式，但没有！查看控制台日志：

https://jsfiddle.net/op7Lsvdp/2/

您在点击.buttonHolder 后添加这些类，所以也许这就是您想要添加.css 的时间

【讨论】：