Svelte过渡/动画是使用CSS还是JS完成的？

Question

我正在检查Svelte，并且发现了很多我所期望的东西。

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

生成的动画是否仅是CSS？

Answer 1

简短的答案：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中的样式（必须在主线程上进行操作，从而创建常见的jank）。