Skip to content

Commit

Permalink
fix: do not spin year on tab switch
Browse files Browse the repository at this point in the history
  • Loading branch information
simonwep committed Oct 27, 2024
1 parent 4eb39ae commit ff7e476
Showing 1 changed file with 10 additions and 3 deletions.
13 changes: 10 additions & 3 deletions src/app/components/base/text-wheel/TextWheel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,24 @@
<span :class="$style.container">
<span :class="$style.placeholder">{{ value }}</span>
<span :class="$style.textWheel">
<span v-for="v of values" :key="v" :class="$style.value">{{ v }}</span>
<span v-for="v of values" :key="v" :class="[$style.value, { [$style.transition]: mounted }]">{{ v }}</span>
</span>
</span>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { computed, onMounted, ref } from 'vue';
const props = defineProps<{
values: (string | number)[];
value: string | number;
}>();
const mounted = ref(false);
const offset = computed(() => props.values.indexOf(props.value));
onMounted(() => (mounted.value = true));
</script>

<style lang="scss" module>
Expand All @@ -37,7 +41,10 @@ const offset = computed(() => props.values.indexOf(props.value));
}
.value {
transition: transform var(--transition-s);
transform: translateY(calc(v-bind(offset) * -100%));
&.transition {
transition: transform var(--transition-s);
}
}
</style>

0 comments on commit ff7e476

Please sign in to comment.