Theo's Typesafe CultTTC
Theo's Typesafe Cult•2y ago•
7 replies
Giuliopime

Animating a background moving between grid elements

I made this simple switch but I wanna animate the background moving from left to right instead of having it disappear and reappear.
Right now the background is just a css class applied when the item is active, but I was thinking of creating a grid item that overlaps the other two with the same width to achieve this. Couldn't get it working though, any tips on how I can do this?

This is my current component
<script lang="ts" setup>
defineProps<{
  first: string
  second: string
}>()
const enabled = ref(false)

function toggle() {
  enabled.value = !enabled.value
}
</script>

<template>
  <Switch
    v-model="enabled"
    class="relative grid grid-cols-2 bg-grey-900 gap-2 border-box-border rounded-full border p-1 cursor-pointer"
    @click="toggle"
  >
    <span
      class="select-none text-center rounded-full px-2 py-1 text-xs transition-all"
      :class="enabled ? 'bg-purple-500' : ''"
    >{{ first }}</span>
    <span
      class="select-none text-center rounded-full px-2 py-1 text-xs transition-all"
      :class="!enabled ? 'bg-purple-500' : ''"
    >{{ second }}</span>
  </Switch>
</template>
Was this page helpful?