fix: Calendar transition bug

[lovlyx]

Added classes from VCalendar styles to fix transition glitch.

[sadeghbarati]

Can you share a video of your fix? Thanks 🫡🙌

[sadeghbarati]

The Glitch partially goes away but,
Main shadcn-ui Calendar has no transition

---

Screen.Recording.2023-11-30.at.5.53.47.PM.mov

[lovlyx]

@sadeghbarati

Old Calendar Transition:
https://github.com/radix-vue/shadcn-vue/assets/110987585/6e7030a4-fad0-4e20-8c99-ea4ecd0f22ac

Fixed Calendar Transition:
https://github.com/radix-vue/shadcn-vue/assets/110987585/f38a1735-d95f-4798-b7b6-2000c3f8798c

I've noticed on the new version there is still a trail that shows on the horizontal axis, but that could probably fixed with overflow-hidden.

[sadeghbarati]

Other maintainers should decide: "Keep transition for Calendar or make it like the main shadcn-ui"

IMO let's follow the main shadcn-ui, no transition
If other maintainer decide to keep transition I will rebase and drop my commit 🙏

[lovlyx]

Yeah, but we would have to find a fix for the glitches when moving pages.

[sadeghbarati]

find a way you can append these to style section

.vc-pane-container {
  width: 100%;
  position: relative;
}

.vc-pane-container.in-transition {
  overflow: hidden;
}

.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-slide-left-enter-from,
.vc-slide-left-leave-to,
.vc-slide-right-enter-from,
.vc-slide-right-leave-to {
  opacity: 0;
}

and add z-10 to the div that contains this classes absolute flex justify-between w-full px-4 top-3

[sadeghbarati]

Can I push? @lovlyx

[sadeghbarati]

Screen.Recording.2023-11-30.at.6.56.23.PM.mov

[lovlyx]

Oh Perfect!

[zernonia]

Personally I would prefer the transition (although original shadcn doesn't). I felt smoother and keep consistent as most of the components with entry/exit component has transition.

[sadeghbarati]

@lovlyx

I can't access to my computer right now can you drop my commit?

If you not familiar with vim, change git editor to VSCode

git config --global core.editor "code --wait"

• git rebase -i HEAD~2 (interactive rebase last two commits)

• select drop

• git push --force-with-lease

Also, don't forget about overflow-hidden

Thanks 🫡

[lovlyx]

Okay @zernonia it should all be good now.

[zernonia]

LGTM! Thanks @lovlyx @sadeghbarati