sveltesveltekitsvelte-transition

Apply different transition on smaller screens

I would like to apply a different transition when the device width is below a certain threshold. Similar to this question, but instead of just passing different transition parameters per breakpoint, I want to apply a different transition.

For example applying a fly transition by default, but then on screens smaller than 600px in width, apply a simple fade transition.

Solution

  • Transitions are just functions, so you can just move the size check into a custom transition function and call fly/fade, something like:

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

    <div transition:fadeOrFly>

    REPL