背景:
我正在使用skrollr插件作为 Rails 项目的一部分,该项目使用 Slim 进行标记。该插件需要滚动动画的起点和终点的数据属性。这是一个例子:
#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 生成属性的正确方法。
可能的?