chakra-ui-vue
chakra-ui-vue copied to clipboard
chakra-ui
[Feature]: Add transitions for popover/drawer/menu/tooltip components
Is your feature request related to a problem? Please describe. To smoothen the UX around the entry and exit of off-canvas and popover-type components, I would like for us to have some CSS transitions.
Describe the solution you'd like
- Add transitions scale to the theme object for constrained transitions
- Allow users to define the transitions easing, duration, e.t.c for component
- Transitions can be
opt-out.
Describe alternatives you've considered N/A
Additional context
- We currently consume anime js as a dependency. Perhaps it can be used since it provides some pretty good and performant JS animations.
Hi! I am new here, and have been looking for beginner friendly issues. May I work on this one?
Hi @Anmol270900 Thanks for the initiative on this. ❤️
This issue is one that I'm taking ideas for now! I would like to implement the transitions in a way that the user can also modify them form the theme object. After giving it some thought I think that the level of complexity of it might be more than I initially thought. 🤔
If you have some ideas around implementing transitions fo the off canvas components using animejs, I'm happy to have you contribute. We also have a discord channel where we can get faster responses. Happy to have you!
Join the Chakra discord 👇🏽 https://discord.gg/sq2Kp6x
Hi @codebender828 ! 👋 Well, I am a beginner in Vue. Maybe I should search for other issues instead. 😅 Please go ahead with it. Eager to see how issues like these are sorted! 😃
Hi @Anmol270900 ! Sure thing :D Are you familiar with Nuxt.js? I'd like us to add the Discord invite link to the website. If you'd like to work on this, I can create an issue and guide you on how to proceed 😀💪🏽
Hi @codebender828, I'm interested in working on this issue. Do you have any contribution guidelines?
As for applying the animation, we can try to use simple CSS class toggle for this or use GSAP (although I prefer simple CSS class toggle for this) since it's generally more performant.
Hey @afmire877 @Namchee !
Thanks for the initiatives on this. Honestly at this point in time I haven't yet come up with a crystal-clear, sure-fire way to handle the transitions. I'm also thinking about using pure CSS animations for this with emotion using the <transition> component. Since it's just a series of transition class names, I think we can come up with some ways to use CSS to create the class names and use the CSS transitions. the best place to do this will probably inside the CPortal component for components that use the CPopper component.
Let's talk about this more on Discord for faster responses here: 👉🏽 https://discord.gg/Vry2UV7
Hi there! Loving Chakra so far! Wanted to see if there has been any movement on this or if anyone can point me in the direction of how I can easily change the drawer open animation. Thanks!
Hi there! Loving Chakra so far! Wanted to see if there has been any movement on this or if anyone can point me in the direction of how I can easily change the drawer open animation. Thanks!
Hi, @DRD161 ! I'm glad to hear that your loving Chakra so far!
At the moment there hasn't been much movement on this issue. The team has been working on v1 where this will be resolved but we'd like to have the transition issue resolved here as well.
If you're interested in taking this on, I'd recommend looking at the CTransition.js and CDrawer files that we used to handle transitioning.
I think it's an interesting problem to solve.
Hit us up on Discord if you want to chat with the team on this!
https://discord.gg/sq2Kp6x