Vue Component Animations

[Karlstens]

I've tried writing a couple of different Vue components for a toggle switch, and when I couldn't get the switch animating between true and false state, I ventured out to Codepen to see where I might be going wrong.

Here is an example of an animated toggle switch on Codepen, similar to what I'm attempting to achieve with my Vue component.

https://codepen.io/AllThingsSmitty/pen/MmxxOz/

When I bring this sample code into a VitePress project as a Vue component, although it toggles and functions correctly, it still fails to animate the toggle sliding between true and false.

I'm hoping to understand why this might be the case.

[brc-dd]

Seems to be working fine for me - https://stackblitz.com/edit/vite-slkbjo?file=docs/index.md

If you're using this to toggle theme, then you need to mark transitions as important - transition: .4s !important; - because transitions are force disabled during theme toggle, so for theme toggle switches, etc. you need to override that disabling. See https://paco.me/writing/disable-theme-transitions for reasoning.