css 变量_如何将CSS变量用于动画

css 变量

当我们在讨论中提到CSS时，我们通常将其称为愚蠢的语言。一种声明性语言，缺乏逻辑和洞察力；但这不是真实的现实。多年来，开发人员一直渴望标准CSS中的变量，长期以来一直被诸如LESS和Sass之类的预处理器所破坏。 CSS变量不仅是开发人员的实际选择，而且还可以在动画场景中使用。还在怀疑吗？继续了解更多！

可变基础

CSS变量是用于在样式表中重用的存储值。使用自定义var()函数可以访问它们，并使用自定义属性符号进行设置。

:root {
--main-color: goldenrod;
}
div {
background-color: var(--main-color);
}

:root内定义的变量是全局变量，而选择器内定义的变量特定于该选择器。

div {
--module-color: goldenrod;
background-color: var(--module-color);
}

在上面的示例中，任何div都将接受该变量，但是我们可以使用诸如class和id class定位方法来命名更具体。

var()函数也可以接受后备值。

.nav {
background: var(--navbg, blue);
}

这在尚未定义变量或使用自定义元素和Shadow DOM的情况下很有用。

CSS变量还没有为黄金时间做好准备，但是随着许多领先的浏览器已经实现该规范，对未来的展望非常光明。可以毫无疑问地使用它们只是时间问题，而且时间越来越快。

动画变量

有许多将CSS变量与动画结合在一起的选项。考虑一下上下文，例如音频可视化，JavaScript事件驱动的场景，甚至是CSS驱动的事件，例如hover ， focus和target 。从理论上讲，Apple Watch可以连接到API，同时使用基于CSS变量的跳动心脏动画。然后，我们有了加速度计，设备倾斜API甚至游戏手柄API，但是为什么我们应该考虑完全使用CSS变量进行动画处理呢？原因如下：

易于调试。
没有过多的DOM操作。
DOM节点独立。
主题化
与SVG一起使用。

CSS中的操作确实是整个动画难题的关键部分。 CSS函数（例如calc可以在运行时接受值，并执行运算符（例如乘法，除法，加法，减法，将值变异为新值）。这有助于使CSS变量动态化。

JavaScript中CSS变量

现在我们知道了CSS变量的外观以及它们可以做什么，现在是时候了解JavaScript如何适合所有这些情况了。

document.documentElement.style.getPropertyValue('--bgcolor');
document.documentElement.style.setProperty('--bgcolor', 'red');
document.documentElement.style.removeProperty('--bgcolor');

上面显示的方法用于设置，获取和删除属性值。它们可以用于我们的典型CSS属性（ background-color ， font-size等），但也可以用于CSS变量。这些选项将为全局定义的属性设置新值，该属性在CSS中也称为:root 。

它们也是对CSS变量进行动画处理的真正秘诀，因为我们的JS方法可以在运行时动态获取，设置或删除变量！

var element = document.querySelector('div');
element.style.getPropertyValue('--bgcolor');
element.style.setProperty('--bgcolor', 'red');
element.style.removeProperty('--bgcolor');

如果需要，还可以为特定元素设置新值。在上面的示例代码段中，我们要处理一个附加到div选择器而不是全局附加的变量。

野外演示

有很多很棒的，非常有才华的开发人员使用CSS变量来构建和试验这些React式和基于主题的动画的概念。这里只是几支钢笔，您可以深入了解引擎盖下发生的事情。

日落日出

大卫•霍希尔德（David Khourshid）

此示例显示了以基于主题的方式使用CSS可变动画的功能。在没有CSS变量的情况下执行此演示程序的代码通常是原来的两倍，而如果要超过两个主题，则需要更多的代码。

CSS变量动画

由灰色幽灵。

这是另一个示例，该示例在JavaScript中使用鼠标事件来驱动圆的位置。

每次您移动鼠标时，JavaScript都会更新我们声明的变量，从而允许圆相对于光标移动位置。

亚历克斯CSS Husky

大卫•霍希尔德（David Khourshid）

这与上面演示的原理相同，但用于另一种情况。

注意移动鼠标时会发生什么？太酷了吧？

带有CSS变量的动画

由Wes Bos撰写。

如何以其他方式更新变量的值？让我们看一下Wes Bos的以下演示，它使用滑块来更新图片的位置。

随意移动滑块。注意到随之而来的凉爽吗？简单但神奇的是，每次调整滑块时，它所做的就是更新变换位置的变量。 Suuuuhhhweeet！

Single Div手风琴（带有CSS变量动画）

丹·威尔逊（Dan Wilson）着。

那里的音乐家有些不同吗？看看Dan Wilson的这款手风琴手风琴。

哇！看着那些键动起来！这似乎有些令人生畏，但从根本上讲，这只是JavaScript更新CSS变量。仅此而已。

CSS变量+变换=单个属性（带有输入）

丹·威尔逊（Dan Wilson）着。

在此演示中，使用输入范围来修改每个变换属性并见证它们的平滑程度，即使您在过渡过程中更改了属性也是如此。

CSS变量的副作用

由于CSS变量始终是可继承的属性，因此它们可能导致子代的样式重新计算，从而对过程的性能产生不利影响。这是您必须衡量的，而不是根据您的上下文进行猜测。

呵呵，似乎修改元素上CSS变量会触发其子元素_all_的样式重新计算。哎哟。 pic.twitter.com/jvpDT5UB2h

— Joni Korpi（@jonikorpi），2017年5月18日

这是Shaw 在Work Slack 动画小组上发布的一个演示，用于进行测试： CSS变量重新计算样式性能测试

在测试期间（Chrome58。Mac10.12），发现当触发“ 设置CSS Var”按钮直到浏览器绘制背景时，重新计算时间为52.84ms，渲染时间为51.8ms。切换到CSS属性测试发现了一个截然不同的结果。从触发“ 设置CSS属性”按钮开始直到背景画完为止，大约有0.43毫秒的重新计算和0.9毫秒的渲染时间。

如果将background切换为color则将获得等效的测量值，因为在子级中可能存在或可能不存在currentColor （向David Khourshid喊）。任何可继承的属性将始终导致所有子代的样式重新计算。属性background-color不可继承，因此与始终可继承CSS变量之间存在巨大差异。通常，默认情况下inherit CSS属性在大多数情况下会导致样式的大量重新计算。仍需注意，不断更改CSS变量可能会浪费性能。避免这种情况的一个好习惯是在最特定的级别（或最深的级别）设置CSS变量的动画，以防止大量儿童受到影响。您可以通过Google的“ Web基础知识”页面详细了解如何减少样式计算的范围和复杂性。

结论

我鼓励大家参与并亲自测试该演示，并做出自己的结论/更改/自定义测试，并在评论中分享您的结果。所有这一切的主要收获是CSS变量提供了巨大的灵活性，但是在具有大量子代的父代上设置CSS变量将对性能产生影响。

特别感谢“ Animation At Work Slack”频道中的帮派，他们正在进行的测试，反馈和讨论（ David Khourshid ， Joni Korpi ， Dan Wilson和Shaw ）。

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-use-css-variables-for-animation--cms-28868

css 变量