javascript - 作为 Slim 中元素属性的一部分的内联 Javascript 变量

Question

背景:

我正在使用 skrollr作为使用 Slim 进行标记的 Rails 元素的一部分的插件。 该插件需要滚动动画的起点和终点的数据属性。这是一个例子:

#canvas-1 data-0="top:-80px;" data-1180="top:0px;"

该插件基本上会将top css 从data-0(滚动位置0px)动画化到data-1180(滚动位置1180px) .

问题:

页面上的一些需要动画的元素位于具有不同高度的容器下方。因此，data-xxxx 可以根据前面容器中的内容而有所不同。我有一个 javascript 函数，它计算出所有前面元素的高度并返回一个变量，该变量表示 data-xxxx 应该是什么。理论上 Slim 中的输出应该是这样的:

#logo.unit data-#{ "<script>logoPosition</script>" }="top:5px" data-#{ "<script>logoPosition + 200</script>" }="top:-8px;"

小错误。无论我如何尝试添加内联 javascript 属性 - 它都会出错。我目前的解决方案是所有 javascript(完全取代了属性)。但是，我想知道执行内联 javascript 生成属性的正确方法。

可能吗？

Answer 1

如果我对您的理解正确，您可以单独使用 skrollr 来完成此操作。阅读关于相对模式的文档 https://github.com/Prinzhorn/skrollr#absolute-vs-relative-mode

像这样(你懂的):

#logo.unit data-top="top:5px" data-200-top="top:-8px;"

使用 data-anchor-target="#logo.unit"，您甚至可以让其他元素的动画取决于 Logo 的位置。