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

【问题标题】：Easy Scroll-Based Animations using CSS Custom Properties使用 CSS 自定义属性轻松实现基于滚动的动画
【发布时间】：2017-11-22 04:46:30
【问题描述】：

现在对自定义 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 根本不会启动动画，并忽略动画延迟。

【问题讨论】：

如果你用它来保存数据，似乎数据属性会更好
好吧，我不是用它来保存数据，而是将它用作自定义 css 属性。查看：smashingmagazine.com/2017/04/start-using-css-custom-properties

标签： javascript css safari css-animations css-variables

【解决方案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/

@编辑

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

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

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

setProperty('color', 'green');

它会自动更新样式。

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

【讨论】：