Можно использовать перевод дважды на одном элементе?

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

Есть несколько исправлений, необходимых для вашего кода:

• При установке значения transform в пределах ball_movement, то 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>