Question

现在对自定义css属性的支持正在变得越来越普遍，我想到使用它们来简化基于滚动的动画的创建。在Javascript中，我使用style.setProperty（' - customProperty'，value）来调整用户滚动时特定元素的自定义属性。

它在Chrome，Firefox和Safari 10中运行良好。

但，在Safari 9.1中（支持自定义属性），我只能设置属性一次。设置后，它不会更新为新值。

我在CodePen中得到了所有内容：https://codepen.io/kirkhadden/pen/JJbXmE/

// Have we scrolled since the last frame? 
if (position != wrapper[0].scrollpos) {

  // Keeps updating accurately every frame:
  window.log.text(position);

  // Only happens on the first frame:
  wrapper[0].style.setProperty('--scrollpos', position+'px', '');

  wrapper[0].scrollpos = position;

} else { // No Change

  return false;

}

我找不到任何信息，甚至没有提及此行为。我在Safari中测试了style.setProperty（）的其他更简单的用法，我继续发现，一旦设置了属性，Safari就不会更新相同的属性，即使我首先尝试删除属性。

这是Safari 9.1中的错误吗？有解决方法吗？有没有其他方法可以使用javascript来设置css变量？

更新

因此，我可以使用jQuery的.attr（）方法来设置属性，而不是style.setProperty。它并不理想，因为它会覆盖任何其他样式属性，但它适用于此。

更大的问题是整个解决方案基于在我的所有动画元素上设置普通css动画的想法，但将播放状态设置为'暂停'，然后使用javascript来操纵动画延迟根据滚动位置。这允许我利用继承来以最少的DOM操作来动画很多东西。

再一次，Safari 9.1是路障，因为它似乎与Chrome或Firefox不同，如果播放状态为“暂停”，Safari根本不会启动动画，并忽略动画延迟。

Answer 1

您可以尝试通过JavaScript

填充CSS变量

例如：

let variables =
{
  color: "red",
  border: "2px solid blue"
}

// Get STYLE tag
let style = document.getElementById('custom');
// Save its original text
style.dataset.source = style.innerHTML;
function updateStyle()
{
    // Replace variables names with their values
    style.innerHTML = style.dataset.source.replace(/@(\w+)/g, function(match, name)
    {
        return variables[name];
    });
}

updateStyle();

现在，您可以在CSS中使用@variableName，并将其替换为variables.variableName

的值

小提琴：https://jsfiddle.net/JacobDesight/v7mqps84/

@EDIT

您甚至可以为设置变量创建一个函数：

function setProperty(name, value)
{
    variables[name] = value;
    updateStyle();
}

现在您只需执行以下操作：

setProperty('color', 'green');

它会自动更新样式。

小提琴：https://jsfiddle.net/JacobDesight/v7mqps84/1/

使用CSS自定义属性轻松实现基于滚动的动画

更新

1 个答案: