svelte/transition 模块有一些内置的过渡效果，但创建自己的过渡效果也非常简单。以下是 fade（淡入淡出）过渡效果的源代码示例：
function fade(node, { delay = 0, duration = 400 }) {
const o = +getComputedStyle(node).opacity;
return {
delay,
duration,
css: (t) => `opacity: ${t * o}`
};
}该函数接收两个参数 —— 要应用过渡效果的节点，以及传入的任何参数 —— 并返回一个过渡对象，该对象可以具有以下属性：
delay— 过渡开始前的延迟毫秒数duration— 过渡持续时间（毫秒）easing— 一个p => t缓动函数（参见补间动画章节）css— 一个(t, u) => css函数，其中u === 1 - ttick— 一个(t, u) => {...}函数，用于对节点产生某些效果
t 值在入场动画开始时或退场动画结束时为 0，在入场动画结束时或退场动画开始时为 1。
大多数情况下，你应该返回 css 属性而不是 tick 属性，因为 CSS 动画在可能的情况下会在主线程之外运行，以防止卡顿。Svelte 会”模拟”过渡效果并构建 CSS 动画，然后让它运行。
例如，fade 过渡会生成类似这样的 CSS 动画：
0% { opacity: 0 }
10% { opacity: 0.1 }
20% { opacity: 0.2 }
/* ... */
100% { opacity: 1 }不过我们可以创造出更有创意的效果。让我们做一些真正华丽的效果：
App
<script>
import { fade } from 'svelte/transition';
import { elasticOut } from 'svelte/easing';
let visible = $state(true);
function spin(node, { duration }) {
return {
duration,
css: t => {
const eased = elasticOut(t);
return `
transform: scale(${eased}) rotate(${eased * 1080}deg);
color: hsl(
${Math.trunc(t * 360)},
${Math.min(100, 1000 * (1 - t))}%,
${Math.min(50, 500 * (1 - t))}%
);`
}
};
}
</script><script lang="ts">
import { fade } from 'svelte/transition';
import { elasticOut } from 'svelte/easing';
let visible = $state(true);
function spin(node, { duration }) {
return {
duration,
css: t => {
const eased = elasticOut(t);
return `
transform: scale(${eased}) rotate(${eased * 1080}deg);
color: hsl(
${Math.trunc(t * 360)},
${Math.min(100, 1000 * (1 - t))}%,
${Math.min(50, 500 * (1 - t))}%
);`
}
};
}
</script>请记住：能力越大，责任越大。
上一页 下一页
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script>
import { fade } from 'svelte/transition';let visible = $state(true);
function spin(node, { duration }) { return {duration,
css: (t) => ``
};
}
</script>
<label>
<input type="checkbox" bind:checked={visible} />visible
</label>
{#if visible}<div
class="centered"
in:spin={{ duration: 8000 }}out:fade
>
<span>transitions!</span>
</div>
{/if}<style>
.centered {position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
span {position: absolute;
transform: translate(-50%, -50%);
font-size: 4em;
}
</style>