现在对自定义 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 变量吗?
更新
因此,除了 style.setProperty,我还可以使用 jQuery 的 .attr() 方法来设置属性。这并不理想,因为这会覆盖任何其他样式属性,但它适用于此。
更大的问题是,整个解决方案是基于在我所有的动画元素上设置普通 css 动画的想法,但将播放状态设置为“暂停”,然后使用 javascript 根据滚动位置。这使我能够利用继承的优势,以最少的 DOM 操作为许多事物设置动画。
Safari 9.1 再次成为障碍,因为它似乎与 Chrome 或 Firefox 不同,如果播放状态为“暂停”,Safari 根本不会启动动画,并且会忽略动画延迟。
最佳答案
您可以尝试通过 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
的值替换
fiddle :https://jsfiddle.net/JacobDesight/v7mqps84/
@编辑
您甚至可以为设置变量创建一个函数:
function setProperty(name, value)
{
variables[name] = value;
updateStyle();
}
现在您只需简单地执行以下操作:
setProperty('color', 'green');
它会自动更新样式。
关于javascript - 使用 CSS 自定义属性的简单的基于滚动的动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44639526/