可能在同一元素上使用两次翻译？

Question

我使用Javascript来通过变换从画布中心到左上角的圆进行翻译。接下来我要做的是调用一个函数，在画布中选取随机坐标并发送它们进行平移，以便它的位置可以移动。不幸的是，这是行不通的。

你只能在CSS中的元素上调用一次转换吗？这是我要来的结论，但我一直无法找到文档中的信息，说这种类型的行为不是允许的。

事情的心脏：

function change_level() { 
    var level = document.getElementById("level"); 
    level.parentNode.removeChild(level); 
    var ball = document.getElementById("init_pos"); 
    ball.style.backgroundColor = "orange"; 
    ball.style.borderRadius = "25px"; 
    ball.style.transform = "translate(-600%, -647%)"; 
    setTimeout(ball_movement(ball), 3000); 
    ball.style.transition = "background-color 2s ease-in, transform 3s ease"; 

} 

function ball_movement(ball) { 
    var movements = 5; 
    var x; 
    var y; 
    for (var i = 0; i < movements; i++) { 
    x = getRandomArbitrary(-800, 800); 
    y = getRandomArbitrary(-800, 800); 
    ball.style.transform = "translate("+x+", "+y+")"; 
    ball.style.transition = "transform 3s ease"; 
    console.log(x); 
    } 
} 

发布我的代码的jsfiddle，虽然我的计算是比的jsfiddle校园较大，因此不能正常工作。

https://jsfiddle.net/2c5gwbcd/

Answer 1

有一对夫妇需要你的代码更正：

• 在设置中ball_movement的transform值时，x和y变量具有仅仅数作为值，但translate功能需要单位值（百分比，像素等）。因此，通过在适当的位置附加px或%来添加它。
• 在timeout函数调用中，当您将第一个参数设为ball_movement(ball)时，函数立即被调用。你应该把它包装在一个匿名函数中。

注：在下面的代码段中，我已经减少了translate函数的初始值和随机数计算，以保持边界内的球的运动的输入。

window.onload = function() { 
 

 
    var 
 
    html_display = { 
 
     0: "Level One", 
 
     1: "Level Two", 
 
     2: "Level Three", 
 
     3: "Level Four", 
 
     4: "Level Five" 
 
    }; 
 

 
    html_key = 0; 
 

 
    //need to take level offscreen, add ball 
 
    function change_level() { 
 
    var level = document.getElementById("level"); 
 
    level.parentNode.removeChild(level); 
 
    var ball = document.getElementById("init_pos"); 
 
    ball.style.backgroundColor = "orange"; 
 
    ball.style.borderRadius = "25px"; 
 
    ball.style.transform = "translate(-150%, -150%)"; 
 
    ball.style.transition = "background-color 2s ease-in, transform 3s ease"; 
 
    setTimeout(function() { 
 
     ball_movement(ball); 
 
    }, 3000); 
 

 
    } 
 

 
    function ball_movement(ball) { 
 
    var movements = 5; 
 
    var x; 
 
    var y; 
 
    for (var i = 0; i < movements; i++) { 
 
     x = getRandomArbitrary(-100, 100); 
 
     y = getRandomArbitrary(-100, 100); 
 
     ball.style.transform = "translate(" + x + "px, " + y + "px)"; 
 
     ball.style.transition = "transform 3s ease"; 
 
    } 
 

 
    } 
 

 
    function getRandomArbitrary(min, max) { 
 
    return Math.random() * (max - min) + min; 
 
    } 
 

 
    function intro_html() { 
 
    document.getElementById("level").innerHTML = html_display[html_key]; 
 
    setTimeout(change_level, 1000); 
 
    } 
 

 
    intro_html(); 
 
}

body { 
 
    position: absolute; 
 
    top: 45%; 
 
    left: 50%; 
 
    -moz-transform: translateX(-50%) translateY(-50%); 
 
    -webkit-transform: translateX(-50%) translateY(-50%); 
 
    transform: translateX(-50%) translateY(-50%); 
 
} 
 
#level { 
 
    font-family: helvetica; 
 
    font-size: 29px; 
 
    position: absolute; 
 
    top: 45%; 
 
    left: 50%; 
 
    -moz-transform: translateX(-50%) translateY(-50%); 
 
    -webkit-transform: translateX(-50%) translateY(-50%); 
 
    transform: translateX(-50%) translateY(-50%); 
 
} 
 
#init_pos { 
 
    position: absolute; 
 
    top: 44%; 
 
    left: 48.17%; 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 
.container { 
 
    height: 700px; 
 
    width: 1100px; 
 
    top: 45%; 
 
    left: 50%; 
 
    border: 4px solid black; 
 
    overflow: hidden; 
 
}

<div class="container"> 
 
    <p id="level"></p> 
 
    <p id="init_pos"></p> 
 
</div>