Svelte transitions/animations 是用 CSS 还是 JS 完成的？
Are Svelte transitions/animations done with CSS or JS?
我正在检查 Svelte，我发现了很多我期望的开箱即用的东西。
有一件事让我有点吃惊，过渡和动画工具的数量，尤其是 custom transitions 的工具，我无法从它们的语法中完全判断这些是否是编写 [= 的函数19=]，或者如果它们是直接使用类似 CSS 的语法操作样式的函数。
生成的动画 CSS 是否仅？
简短回答：CSS。
较长的答案：调用转换函数时，它 returns 具有转换对象的对象，该对象必须包含 css 方法、tick 方法或两者. tick 方法很简单——它在每一帧调用（基本上使用 requestAnimationFrame）直到转换完成，允许你做一些只用 CSS 做不到的事情，比如 typewriter effect.
css 方法的工作方式不同。假设您有一个简单的淡入淡出过渡 returns 一个像这样的函数：
css: t => `opacity: ${t}`
（这几乎就是 built-in fade transition does 的内容。）在 转换开始之前，此函数将使用不同的 t 值多次调用— 次数取决于过渡的持续时间 — 这样就生成了一组关键帧：
keyframes = [
'0% { opacity: 0 }',
'10% { opacity: 0.1 }',
'20% { opacity: 0.2 }',
// ...
];
然后将这些关键帧连接在一起形成 CSS 动画并应用于元素。
在这个简单的例子中，它可能看起来 over-engineered — 毕竟，我们可以从 0% { opacity: 0 } 到 100% { opacity: 1 }。但它使我们能够使用 CSS 动画中通常不可用的缓动函数来构建 custom transitions，所有这些都无需诉诸 JavaScript 中的操纵样式（这必须在主线程上进行，造成常见的卡顿来源。）
我正在检查 Svelte，我发现了很多我期望的开箱即用的东西。
有一件事让我有点吃惊，过渡和动画工具的数量，尤其是 custom transitions 的工具，我无法从它们的语法中完全判断这些是否是编写 [= 的函数19=]，或者如果它们是直接使用类似 CSS 的语法操作样式的函数。
生成的动画 CSS 是否仅？
简短回答：CSS。
较长的答案：调用转换函数时，它 returns 具有转换对象的对象，该对象必须包含 css 方法、tick 方法或两者. tick 方法很简单——它在每一帧调用（基本上使用 requestAnimationFrame）直到转换完成，允许你做一些只用 CSS 做不到的事情，比如 typewriter effect.
css 方法的工作方式不同。假设您有一个简单的淡入淡出过渡 returns 一个像这样的函数：
css: t => `opacity: ${t}`
（这几乎就是 built-in fade transition does 的内容。）在 转换开始之前，此函数将使用不同的 t 值多次调用— 次数取决于过渡的持续时间 — 这样就生成了一组关键帧：
keyframes = [
'0% { opacity: 0 }',
'10% { opacity: 0.1 }',
'20% { opacity: 0.2 }',
// ...
];
然后将这些关键帧连接在一起形成 CSS 动画并应用于元素。
在这个简单的例子中，它可能看起来 over-engineered — 毕竟，我们可以从 0% { opacity: 0 } 到 100% { opacity: 1 }。但它使我们能够使用 CSS 动画中通常不可用的缓动函数来构建 custom transitions，所有这些都无需诉诸 JavaScript 中的操纵样式（这必须在主线程上进行，造成常见的卡顿来源。）