Svelte自定义CSS过渡

Svelte 自定义 CSS 过渡

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 easing 函数)

css :(t, u) => css函数, where u === 1 - t。

tick — a (t, u) => {...} 对节点有一定影响的函数。

该 t 值为 0时表示开始,值为1 表示结束,根据情况含义可以截然相反。

大多数情况下,您应该返回该 css 而不是tick 属性,因为 CSS animations 会运行在主线程中,以避免出现混淆。.Svelte '模拟(simulates)' 过渡效果并创建CSS animation,然后使其运行。例如,fade 过渡会生成 CSS animation ,如下所示:0% { opacity: 0 }

10% { opacity: 0.1 }

20% { opacity: 0.2 }

/ ... /

100% { opacity: 1 }不过我们可以发挥更大的创新,做出真正定制化的东西:<script>

import { fade } from 'svelte/transition';

import { elasticOut } from 'svelte/easing';

let visible = true;

function spin(node, { duration }) {

return {

duration,

css: t =&gt; {

const eased = elasticOut(t);

return `

transform: scale(${eased}) rotate(${eased * 1080}deg);

color: hsl(

${~~(t * 360)},

${Math.min(100, 1000 - 1000 * t)}%,

${Math.min(50, 500 - 500 * t)}%

);`

}

};

}

</script>记住:能力越大责任越大。示例代码App.svelte<script>

import { fade } from 'svelte/transition';

import { elasticOut } from 'svelte/easing';

let visible = true;

function spin(node, { duration }) {

return {

duration,

css: t =&gt; {

const eased = elasticOut(t);

return `

transform: scale(${eased}) rotate(${eased * 1080}deg);

color: hsl(

${~~(t * 360)},

${Math.min(100, 1000 - 1000 * t)}%,

${Math.min(50, 500 - 500 * t)}%

);`

}

};

}

</script>

<style>

.centered {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

}

span {

position: absolute;

transform: translate(-50%,-50%);

font-size: 4em;

}

</style>

<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}