现在,对自定义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的值

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

@编辑

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

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


现在,您只需执行以下操作:

setProperty('color', 'green');


并且它将自动更新样式。

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

关于javascript - 使用CSS自定义属性的轻松基于滚动的动画,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44639526/

10-12 00:13
查看更多