javascript - Mootools 使用变量变形

Question

我正在为我的网站创建一个接受多个参数的 javascript 函数，然后使用所述参数执行变形。相当正常的东西，但是变形不起作用。似乎通过获取我想要变形的 css 属性(即 height)作为一个变量，我在窃听。

正在使用的基本代码:

window.addEvent('load', function() {
    var box = $('box');
    var sfx = new Fx.Morph(box, {
        duration: 1000,
        transition: Fx.Transitions.linear
    });
    
    var cssParam = 'height';
    var endVal = '100';
    
    sfx.start({cssParam endVal});
    console.log(sfx);
});

#box {
    width:200px;
    height:200px;
    background-color: #FFFFFF;
    border: 1px solid #000000;
}

<div id="box"></div>

morph 从字面上获取变量 cssParam，并试图将 cssParam 变为 100。显然我做错了，我该如何解决这个问题？

Answer 1

呃

这不是 ES6/7 - 你还不能在 JavaScript 对象字面量中使用动态对象成员。

这个:sfx.start({cssParam endVal}); 是错误的。

改写为:

var morphObject = {};
morphObject[cssParam] = endVal;
sfx.start(morphObject);

在 ES6 中，你将拥有:

var obj = {
    ['foo' + Date.now()]: 42,
    [cssParam]: endVal
};

在现代浏览器中，上面的内容就可以了(在 FF 和最新的 Chrome 中都有效)