Question

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

令我惊讶的是过渡和动画工具的数量，尤其是custom transitions的工具，我不能从它们的语法中看出它们是编写CSS的函数，还是它们是使用类似于CSS的语法直接操作样式的函数。

生成的动画是否仅是CSS？

Answer 1

简短答案：CSS。

更长的答案：调用转换函数时，它将返回带有转换对象的对象，该对象必须包含css方法，tick方法或两者。 tick方法很简单-在过渡完成之前，它被称为每一帧（本质上使用requestAnimationFrame），它允许您执行typewriter effect这样的CSS不可能完成的工作。

css方法的工作原理有所不同。假设您有一个简单的淡入淡出过渡，它会返回如下函数：

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

（这几乎与built-in fade transition does完全相同。）此函数将以不同的t值被多次调用。在过渡开始之前-次数取决于过渡的持续时间-以便生成一组关键帧：

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

然后将这些关键帧连接在一起成为CSS动画，然后将其应用于元素。

在这个简单的示例中，它似乎设计得过分—毕竟，我们可以从0% { opacity: 0 }转到100% { opacity: 1 }。但是，它使我们能够使用CSS动画中通常不提供的缓动函数来构建custom transitions，而无需借助JavaScript中的样式（必须在主线程上进行操作，从而创建常见的jank）。）

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

1 个答案: