javascript - -webkit-transform：使用 += 运算符的增量重新定位不起作用

Question

我正在尝试通过将-webkit-transform属性设置为来逐步重新定位元素+=200px

但它不起作用。我错过了一些东西，但不知道是什么。

• http://jsfiddle.net/yVSDC/

单击 div 应该每次将其进一步向下移动 200 像素。

Answer 1

CSS 不能那样工作，而 jQuery 不会把数据拉出来，所以你可以那样做。

您需要读取该值，添加200然后重置它。

var getTranslatedY = function (element) {
    var transform = element.css("transform") || element.css("-webkit-transform") || element.css("-moz-transform");

    if (transform == "none") {
        return 0;
    }

    return parseInt((transform.match(/^matrix\(.*?(-?[\d.]+)\)$/) || [])[1]) || 0;
};

$('#m').on(
    'click',
    function () {
    var element = $(this);
         element
         .css('-webkit-transform',
              "translateY(" + (getTranslatedY(element) + 200) + "px)");
    });

js小提琴。

Answer 2

var step = 200;
$('body').on('click', "#m", function(){
    $(this).css('-webkit-transform','translateY('+ step +'px)');
    step = step+200;
});

相反-webkit-transform:translateY(100px);，您可以在 CSS 中设置margin-top: 100px;

http://jsfiddle.net/yVSDC/28/

Answer 3

您必须获取当前webkit-transform值并增加它。替代解决方案是使用topCSS 属性

你可以试试这个（它是免费的）：http ://ricostacruz.com/jquery.transit/

示例代码：

$('.box').transition({ x: '200px' });
$('.box').transition({ y: '200px' });
$('.box').transition({ x: '200px', y: '200px' });