Simple CSS transitions dont work in Svelte

[EAlexis92]

Describe the bug

I am not able to use a simple CSS transition in Svelte. I am using SSR and if I go to the console and re-enable the animation it works just in the console. I am not sure if it has to do with the Svelte class: bindings.

Something aside: please fix vitePreprocess not working with the sass modules. When using npm run build it always hangs locally unless you kill dart.exe process. Same thing happens when deploying to a host and the app never deploys. I am using preprocess: sveltePreprocess({ sass: true }) for now.

Reproduction

<script lang="ts">
	import { onMount } from 'svelte';
	let isOpen = false;

	const closeDrawer = (): boolean => (isOpen = false);
</script>

<button onclick={() => (isOpen = true)} aria-label="hi2">Open</button>

<div class="drawer-container" class:open={isOpen}>
	<button class="overlay" onclick={closeDrawer} aria-label="hi"></button>
	<div class="drawer" class:open={isOpen}>
		<button class="close-button" onclick={closeDrawer}>Close</button>
		<!-- Content of the drawer goes here -->
	</div>
</div>

<style lang="scss">
	.drawer-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: none;

		&.open {
			display: block;
		}

		.overlay {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.drawer {
			position: absolute;
			top: 0;
			left: 0;
			transform: translateX(-300px);
			width: 300px; /* Adjust as needed */
			height: 100%;
			background-color: white;
			padding: 20px;
			box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
			transition: transform 0.3s ease-in-out;

			&.open {
				transform: translateX(0);
			}
		}

		.close-button {
			position: absolute;
			top: 10px;
			right: 10px;
		}
	}
</style>

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 2.24 GB / 15.88 GB
  Binaries:
    Node: 22.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 11.1.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (133.0.3065.82)

Severity

annoyance

[7nik]

The transition is canceled due to the usage of display: none in the parent element. Use visibility instead.

It is possible to transition display, but it doesn't work in Firefox properly.

[EAlexis92]

@7nik thank you forgot about that detail. I hope they fix the other issue, they have just ignored it.