Sveltetransition API提供了一种一流的方法，当你的组件进入或离开文档时，可以对其进行动画处理，包括自定义Svelte过渡。默认情况下，transition 指令使用CSS动画，这通常会提供更好的性能，并允许浏览器的主线程不受阻碍。该API就像这样简单：<element transition:transitionFunction /> 。你也可以指定in 或out 指令，这些指令是单向的过渡，只在元素被安装或卸载时运行。
一个工作中的Svelte过渡的例子（跳转到演示）
Svelte提供了一个运行时 svelte/transition包，其中有7个预包装的Svelte过渡函数，所有这些都可以根据你的意愿进行调整。将其与 svelte/easing包，可以实现广泛的交互，而无需自己编写任何过渡代码。玩一玩不同的过渡和缓和函数，感受一下什么是可能的。
想了解如何开始使用Svelte的说明？我们为你提供了一份可靠的概述。
Svelte自定义转换API
如果你需要比Svelte过渡API提供的更多控制，Svelte允许你指定自己的自定义过渡功能，只要你遵守一些约定。从文档中，我们可以看到自定义过渡API的样子。
transition = (node: HTMLElement, params: any) => {
delay?: number,
duration?: number,
easing?: (t: number) => number,
css?: (t: number, u: number) => string,
tick?: (t: number, u: number) => void
}
让我们把它分解一下。过渡函数接受对使用transition 指令的 DOM 节点的引用，并返回一个带有一些控制动画的参数的对象，最重要的是，一个css 或tick 函数。
css 函数的工作是返回一个描述动画的CSS字符串，通常包括某种变换或不透明度的变化。另外，你也可以选择返回一个tick 函数，这可以让你用强大的JavaScript来控制动画的每个方面，但要付出性能上的代价，因为这种类型的过渡不使用CSS动画。
css 和tick 函数都需要两个参数，按惯例称为(t, u) 。t 是一个十进制数字，在元素进入 DOM 时从0.00 到1.00 ，在元素离开时从1.00 回到0.00 。u 参数是在任何给定时刻的t 或1 - t 的倒数。例如，如果你返回一个transform: scale(${t}) 的字符串，你的元素在进入时将顺利地从0 到1 ，而在退出时则相反。
这些概念可能看起来有点抽象，所以让我们通过建立我们自己的自定义Svelte过渡来巩固它们吧
建立你的第一个自定义Svelte过渡
首先，让我们设置一些模板，让我们使用一个Svelte#if 块来切换一个元素在DOM中的存在。记住，Svelte转场只在一个元素实际离开或进入DOM时运行。
<script>
let showing = true
</script>
<label for="showing">
Showing
</label>
<input id="showing" type="checkbox" bind:checked={showing} />
{#if showing}
<h1>Hello custom transition!</h1>
{/if}
你应该能够切换这个复选框，看到我们的元素鲜明地出现和消失在原地。
接下来，让我们设置我们的自定义Svelte过渡功能，并让它与我们的元素连接起来。
<script>
let showing = true
// Custom transition function
function whoosh(node) {
console.log(node)
}
</script>
<label for="showing">
Showing
</label>
<input id="showing" type="checkbox" bind:checked={showing} />
{#if showing}
<h1 transition:whoosh>Hello custom transition!</h1>
{/if}
现在，如果你拨动复选框，你会看到<h1> 元素被记录到控制台。这证明我们已经正确连接了自定义过渡功能在我们的例子中，我们实际上不会使用DOM节点，但是访问元素来引用它的当前样式或尺寸往往是有用的。
为了使我们的元素能够做任何动画，我们需要返回一个包含css （或tick ）函数的对象。让我们让我们的css 函数返回一个单行的CSS，来缩放我们的元素。我们还将返回一个duration 属性来控制动画的时间。
<script>
function swoop() {
return {
duration: 1000,
css: () => `transform: scale(.5)`
}
}
let showing = true
</script>
<!-- markup -->
我们已经有东西在动了!你会注意到我们的元素在切换复选框时直接跳到.5 规模。这是件好事，但如果它能平滑过渡，感觉会好很多。这就是(t, u) 参数的用处。
<script>
function swoop() {
return {
duration: 1000,
css: (t) => `transform: scale(${t})`
}
}
let showing = true
</script>
<!-- markup -->
现在，我们正在谈论!记住，当一个元素进入时，t 会从0.00 平滑地滚动到1.00 ，当它离开时，反之亦然。这使我们能够实现我们想要的平滑效果。事实上，我们刚才写的基本上是svelte/transition 包中内置的scale 的过渡。
让我们再加把劲。transform为了不辜负我们自定义的Svelte过渡的名字，swoop ，让我们给我们的translateX ，这样我们的元素就会从侧面放大和缩小。
在我们继续之前，我想向你挑战，先尝试实现。相信我，这将是很有趣的!假设我们想在元素离开时翻译成100%，在进入时翻译回0%。
[等待...]
进展如何？想比较一下答案吗？
这是我得到的结果。
css: (t, u) => `transform: scale(${t}) translateX(${u * 100}%);`
如果你有不同的东西，也没关系！让我来分析一下我的做法。让我来分析一下我的做法。
这里的关键是css 函数中第二个参数的用法。如果我们在元素进入屏幕时考虑我们的动画，我们希望在 scale(1) translateX(0%) ，所以我们不能对scale 和transform 都使用未经修改的t 。这就是u 参数背后的方便之处--它在任何特定时刻都是t 的倒数，所以我们知道当t 是1 时，它将是0!然后我将u 乘以100，得到百分比值，并在最后加上% 的符号。
学习t 和u 之间的相互作用是 Svelte 中自定义过渡难题的一个重要部分。这两个参数为你的动画提供了一个动态的世界；它们可以被分割、倍增、扭曲或变形，满足你的任何需要。
让我们把我最喜欢的svelte/easing 函数放在我们的过渡上，然后就可以了。
<script>
import { elasticOut } from 'svelte/easing'
function swoop() {
return {
duration: 1000,
easing: elasticOut,
css: (t, u) => `transform: scale(${t}) translateX(${u * 100}%)`
}
}
let showing = true
</script>
<label for="showing">
Showing
</label>
<input id="showing" type="checkbox" bind:checked={showing} />
{#if showing}
<h1 transition:swoop>Hello custom transition!</h1>
{/if}
总结
祝贺你！你现在可以建立一个自定义的Svelage了。你现在可以建立一个自定义的Svelte过渡函数。我们只是触及了可能的表面，但我希望你觉得自己已经具备了进一步探索的工具。我强烈建议你阅读文档并通过官方教程来获得更多的熟悉感。
