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

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

svelte-transition sveltekit svelte

Johnny _JTH · 技术社区 · 2 年前

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

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

1 回复 | 直到 2 年前

brunnerh 2 年前

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

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

<div transition:fadeOrFly>

推荐文章

Alex · 在轻量级中同时解构和不解构变量

1 年前

Y-jiji · 调整大小时替换了假选择

1 年前

opensas · SvelteKit:使用vitest时出现错误invite.config.js:“没有重载匹配此调用”

1 年前

Leonardo Cavalcante · Svelte 5:当对图像使用条件渲染时,表单在页面加载时短暂出现然后消失

1 年前

Localghost · 我如何在sveltekit的开发和发布版本中拥有单独的功能?

1 年前

Michael · 单击单选按钮后,保存按钮不会立即更新

1 年前

Patrick Kenny · 如何将全局SCSS文件添加到Svelte/SvelteKit?

1 年前

Michael · 将可读存储添加到可写存储

1 年前

Sam Sabin · 是否可以将Svelte{#each}循环的结果限制一定的量?

1 年前

SuperSIlly2 · Svelte/TS通过foreach循环应用样式不会修改样式

1 年前