Closed holtergram closed 11 months ago
v-calendar
source is outdated I hope someone rewrites it in script setup syntax or radix-vue
DatePicker primitives arrive sooner
setting transition="none"
prop has no effect at all and default transition is slide
even if you set it to none
Workaround
.vc-none-enter-active,
.vc-none-leave-active {
transition-duration: 0s;
}
.vc-container {
position: relative;
display: inline-flex;
width: max-content;
height: max-content;
-webkit-font-smoothing: antialiased;
}
.vc-pane-container {
width: 100%;
position: relative;
}
.vc-pane-container.in-transition {
overflow: hidden;
}
.vc-none-leave-active,
.vc-fade-leave-active,
.vc-slide-left-leave-active,
.vc-slide-right-leave-active {
position: absolute !important;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.vc-none-enter-from,
.vc-none-leave-to,
.vc-fade-enter-from,
.vc-fade-leave-to,
.vc-slide-left-enter-from,
.vc-slide-left-leave-to,
.vc-slide-right-enter-from,
.vc-slide-right-leave-to,
.vc-slide-up-enter-from,
.vc-slide-up-leave-to,
.vc-slide-down-enter-from,
.vc-slide-down-leave-to,
.vc-slide-fade-enter-from,
.vc-slide-fade-leave-to {
opacity: 0;
}
Environment
Link to minimal reproduction
Official docs
Steps to reproduce
Visit https://www.shadcn-vue.com/docs/components/date-picker#form and click through
Describe the bug
Hey, I have a weird glitch or flickering when I'm clicking through the months. I've tried to capture/record it but since the display of my MBP M1 is probably running at 120Hz and the recording software runs at 60fps at max I can't actually show what it looks like. For a brief millisecond it shows the next/previous months below the current month and then vanishes right after. So it takes up the whole screen I'm showing in the picture. It's happening with the Calendar and Datepicker component in Firefox Dev, Safari and Chrome. It does not happen when using VCalendar. So my best guess is that it's because of the transition that's supposed to fire but doesn't actually show? At least I'm not seeing any slide animation just a hard cut right after the glitch.
Does this help to narrow down what might be happening? Thanks for the awesome port!
Expected behavior
No flickering, smooth transition.
Conext & Screenshots (if applicable)
https://github.com/radix-vue/shadcn-vue/assets/42282368/79e27f2a-b855-4d76-bac7-9e5e560a7349