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