Het maken van de platenspeler naald animatie wanneer er op "play" word gedrukt

[Hadil66]

Ik heb de animatie met keyframes gemaakt, maar de client-side JavaScript werkt nog niet. Ik heb het met onMount geprobeerd, maar wil het nu met on:click proberen. Tot nu toe is het me nog niet gelukt om het werkend te krijgen.

[Hadil66]

Dit is de animatie van de naald voor het 'More Info'-gedeelte. De play-button is een tijdelijke placeholder en wordt later vervangen. Bij een klik op de button draait de naald 45 graden.

Aan het begin staat needlePlay op false, wat betekent dat er geen rotatie is. Na de klik op de button verandert needlePlay naar true en wordt de rotatie van 45 graden toegepast.

  let needlePlay = false

<svg class:needlePlay={needlePlay} on:click="{() => needlePlay = !needlePlay}

  <button class="play-button" on:click="{() => needlePlay = !needlePlay}">

Hierbij heb ik dit als voorbeeld gebruikt.