search

sveltejs / svelte-scroller

A <Scroller> component for Svelte apps
https://svelte.dev/repl/76846b7ae27b3a21becb64ffd6e9d4a6
Other
347 stars 25 forks source link

Add `.active` to 'active' item? #12

Closed chimp1nski closed 4 years ago

chimp1nski commented 4 years ago

Hey,

was wondering if there is a good reason why the active element isn't getting an .active class.

I am currently using

<div class:active="{index === 0}">
  Item with Index 0
</div>

as a workaround - which is actually doing what I need / want.

For context: Using a .active class allows for easy CSS animations with transitions being applied without much effort.

REPL Fork link with an example

If this is something you wan't to add but don't have the time to I'd be happy to try my luck at it and open a PR.

chimp1nski commented 4 years ago

Hm okay. I tried to add a dirtyish version of the functionality to the Sapper.svelte in my REPL fork. Classes are added but not recognised by component. Therefore styles do not apply when class is set via JS.

Seems like I still need some time to wrap my head around on how Svelte works 😅 I can actually live with the class:active ... "workaround" it's pretty sleek as well and keeps everything neat and tidy.

Btw: Ty for the great work on Svelte and Sapper. I really enjoy using both of them! Looking forward to helping you once I wrapped my head around svelte entirely.