Pure CSS Transition

[honzahana]

Describe the problem

Hi, is there any built-in way to use pure CSS transition in Svelte?

Describe the proposed solution

Solution in Vue.js: https://v3.vuejs.org/guide/transitions-enterleave.html#transitioning-single-elements-components

<transition name="sidebar">
    <p>hello</p>
</transition>

<style>
.sidebar-enter-active,
.sidebar-leave-active {
    @apply transition duration-300
}

.sidebar-enter-from,
.sidebar-leave-to {
    @apply opacity-0 translate-x-36
}
</style>

TailwindCSS is used in example.

Alternatives considered

-

Importance

would make my life easier

[jrmoynihan]

You can trigger CSS transitions with built-in directives in svelte when the elements leave or enter the DOM. Set opacity to 1 if you only want the translate, not the fade-in-out effect https://svelte.dev/docs#run-time-svelte-transition-fly

E.g.

<div class="sidebar" transition:fly={{ opacity: 1, duration: 300, x: 36}}
    <p>hello</p>
</div>

[honzahana]

Hi @jrmoynihan thank you for reply. I know this built-in JS function and I tested this approach across 50 websites with different level of CSS animation this week.

Unfortunately, on more than half of the sites, this type of build-in transition was not smooth. So I'm looking for a pure CSS solution that is more reliable.

[jrmoynihan]

@honzahana Well, just to be clear, it's not a JS function that provides the animation. It's a CSS animation applied as the node enters/leaves the DOM that simulates a pure CSS transition and importantly, does not run on the main thread. It's hard to know what may be causing your issue without a reproducible example, but it's likely not the transition directive.

It's possible the transition is running into cumulative layout shift and re-flow issues, which are expensive to render, so the problem may exist elsewhere.

Try comparing what you're trying to do with the directives with the pure CSS in a Svelte component style tag:

.class-the-component-always-has{
transition: translateX 300ms ease-in-out;
}
.class-applied-when-animating{
transform: translateX(36px)
}

You can also cheat a little by trying to add GPU acceleration, with translate3d(36px, 0, 0) instead of translateX