javascript - css 翻译不适用于数学函数

Question

我正在尝试将 4 个矩形框转换为具有 sin/cos 函数。但它在 chrome/firefox 中不起作用。但是在 IE 中，它可以工作。下面给出了代码，您可以在 jsfiddle. 中看到演示

(function() {
    var circle = $(".circle"),
        circleChild = $(".circle-child", circle),
        circleChildLength = circleChild.find("li").length,
        isDragged = false,
        speed = 5,
        angles = [],
        initialDistance = 0,
        totalDistance = 150;

    function moveChildCircles() {
        initialDistance += speed;
        if(initialDistance >= totalDistance  || initialDistance <= 0) {
            speed = -speed; 
            isDragged = !isDragged;
        }

      /* This doesn't work, it works only when I set either translateX or translateY     (not both). */

        circleChild.find("li").each(function(i) {
            $(this).css("transform", "translate(" + initialDistance*Math.cos(angles[i]) + "px," + initialDistance*Math.sin(angles[i]) + "px)");
        });
    }

    circle.click(function() {
        var addAngle = Math.PI*2/circleChildLength;

        for(var i = 0; i < circleChildLength; i++) {
            angles[i] = i*addAngle;
        }   
        isDragged = !isDragged;
    });



    (function animate() {

        requestAnimationFrame(animate);
        if(isDragged) {
            moveChildCircles();
        }
    }());

}());

如您所见，这仅适用于 translateX/translateY 之一。当我调试这个时，animate() 方法仅更新第一个 li 值。为什么？

Answer 1

由于对小数像素的数学计算，CSS 更改似乎不起作用。尝试在像素计算中使用 Math.round:

$(this).css("transform", "translate(" + Math.round(initialDistance*Math.cos(angles[i])) + "px," + Math.round(initialDistance*Math.sin(angles[i])) + "px)");

Demonstration