Question

我想翻译给定元素的所有子元素，比如X轴上的100像素。

有几点需要注意：

我不想使用任何jQuery或其他库，因为我在一个应该独立的库中使用它，如果可能的话
这完全是针对Chromium的。事实上，我更喜欢将-webkit-transform: translate(...)用于我现在正在做的事情（因为-webkit-transform即使没有相对定位也能正常工作）

我目前可以使用以下丑陋的hacky代码使其工作：

function translateElementChildrenBy(element, translation)
{
    var children = element.children;
    for(var i = 0; i < children.length; ++i)
    {
        var curPos = parseInt(children[i].style.left);
        if(isNaN(curPos)) curPos = 0;
        children[i].style.position = "relative";
        children[i].style.left = "" + (curPos + translation);
    }
}

translateElementChildrenBy(document.body, 100);

有没有更好的（阅读：清洁）方法来实现这一目标？或者，更好的是，有没有办法只使用-webkit-transform（即没有位置：相对）来实现这一目标？

感谢。

Answer 1

有一个名为webkitTransform的JS属性，它保存变换的实际CSS声明（“rotate（30deg）”，“translate（10px，20px）”等），但每次使用正则表达式读取它时可能不会这是最快的事情，你可以将当前的翻译藏匿在一个新的财产中。

function translateElementChildrenBy(element, translation)
{
    var children = element.children;
    for (var i = 0; i < children.length; ++i)
    {
        var child = children[i];
        var currentTranslation = child._currentTranslation || 0;
        child._currentTranslation = currentTranslation + translation;
        child.style.webkitTransform = "translate(" + child._currentTranslation + ")";
    }
}

translateElementChildrenBy(document.body, 100);

这假设有问题的元素没有任何其他转换集 - 否则，事情会变得有点棘手，你需要确保其他转换不会被删除（再次，这最好通过将所有其他转换属性记忆为JS属性，因为解析声明有点棘手，当然不会那么快。）

沿X轴平移元素的所有子元素

1 个答案: