javascript - 将变量添加到动画CSS

Question

我不知道如何正确编写这些变量，然后将它们放入 animate。

var findCanvasMarginTop = ((100vh - 120) - cvsH) / 2;
var newCanvasMargin = findCanvasMarginTop + "px", 0, 0, 0;
var deployCanvasMargin = {'margin' : newCanvasMargin};
$('#text__menu--show').click(function () {
    $('#canvas__container').animate(deployCanvasMargin, 100);
});

每当我执行此操作或此操作的变体时，我的代码都无法加载。

我正在寻找页面上元素与窗口顶部之间的边距。

然后我创建边距，添加我在第一个变量中找到的边距并将其他 3 个边距设置为 0(因为唯一需要更改的边距是上边距)。

然后我创建 deployCanvasMargin，它是 css，然后在 animate 中添加变量。

我认为这将有效地使 animate 的结果如下:

 $('#canvas__container').animate({'margin' : 50px, 0, 0, 0}, 100);

(假设找到的边距是 50px)

编辑:在此处的答案帮助我解决了我的animate 问题后，我发现了另一个问题。你不能在数学上有 100vh。我需要创建一个变量来查找视口(viewport)高度并使用它，而不是 css 100vh。傻我:)

对于遇到同样问题并且像我这样缺乏经验的人，我通过这样做解决了这个额外的问题

var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)

然后把第一个变量改成这个

var findCanvasMarginTop = ((h - 120) - cvsH) / 2;

Answer 1

jquery animate 具有以下格式

$(selector).animate({style}, 100);

表示

$(selector).animate({margin : '10px'}, 100);

但是您正在传递对象以进行动画处理。

而是使用..

 $('#canvas__container').animate({margin : newCanvasMargin}, 100);

您不能一次使用 margin: 10px 0px 0px 0px 而是将其分成动画帧并使用 margin-left 然后 margin-right ..