Element.animate() с переменным как свойство для анимации

Question

Я хочу использовать Element.animate() со свойствами, которые хочу оживить как переменные. Но похоже, что это не работает.

var pr="marginLeft" 
document.getElementById("someId").animate([ 
    { pr:'0px' }, 
    { pr:'50px' }, 
],{ 
    duration:1000, 
    fill:'forwards' 
}); 

Что делать, если мне действительно нужно использовать переменную вместо свойства?

Answer 1

Вы можете создать объект со свойствами, которые вам нужны, установите значения с помощью obj[X] = Y, и использовать этот объект в качестве параметра для animate функции:

var pr="marginLeft"; 
 
var animationProperties = { 
 
    duration: 1000, 
 
    fill:'forwards' 
 
} 
 

 
// Here I added the `marginLeft` to the object: 
 
animationProperties[pr] = '50px'; 
 

 
$('#someId').animate(animationProperties)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="someId">asd</div>

Answer 2

Вы можете использовать Вычисляемые имена объектов ES2015.

let pr='marginLeft'; 

document.getElementById('someId').animate(
    [ 
    { [pr]: '0px' }, 
    { [pr]: '50px' }, 
    ], 
    { duration:1000, fill:'forwards' } 
);