7

我正在检查 Svelte，我发现了更多我所期望的开箱即用的东西。

让我有点惊讶的是，过渡和动画工具的数量，尤其是自定义过渡的工具，而且我无法从它们的语法中完全分辨出这些是编写 CSS 的函数，还是它们是操纵的函数直接使用类 CSS 语法的样式。

生成的动画是否只有 CSS？

4

1 回答 1

16

简短的回答：CSS。

更长的答案：当调用转换函数时，它返回一个带有转换对象的对象，该对象必须包含一个css方法、一个tick方法或两者兼有。该tick方法很简单——requestAnimationFrame在过渡完成之前，每帧都会调用它（本质上是使用 ），允许您完成仅使用 CSS 无法完成的事情，例如打字机效果。

该css方法的工作方式不同。假设您有一个简单的淡入淡出转换，它返回如下函数：

css: t => `opacity: ${t}`

（这几乎正是内置的淡入淡出过渡所做的。）在过渡开始t 之前，将使用不同的值多次调用此函数- 次数取决于过渡的持续时间 - 以便一组关键帧生成：

keyframes = [
  '0% { opacity: 0 }',
  '10% { opacity: 0.1 }',
  '20% { opacity: 0.2 }',
  // ...
];

然后将这些关键帧组合成一个 CSS 动画并应用于元素。

在那个简单的例子中，它可能看起来过度设计了——毕竟，我们可以从0% { opacity: 0 }到100% { opacity: 1 }. 但它使我们能够使用通常在 CSS 动画中不可用的缓动函数来构建自定义转换，而无需借助 JavaScript 中的样式操作（这必须发生在主线程上，这会造成常见的卡顿。）

于 2019-05-13T12:23:24.777 回答