代码之家 › 专栏 › 技术社区 › Johnny _JTH

在较小的屏幕上应用不同的转换

svelte-transition sveltekit svelte

0

Johnny _JTH · 技术社区 · 2 年前

当设备宽度低于某个阈值时,我想应用不同的转换。类似 this question ,但我不想只为每个断点传递不同的转换参数,而是希望应用不同的转换。

例如,应用 fly 默认情况下为渐变,但在宽度小于600px的屏幕上,应用一个简单的渐变。

1 回复 | 直到 2 年前

1

0

brunnerh 2 年前

转换只是函数,所以您可以将大小检查移动到自定义转换函数中,然后调用 fly / fade ,类似于:

function fadeOrFly(node) {
    return isScreenSmall() ? fade(node) : fly(node, { y: -100 });
}

<div transition:fadeOrFly>