Feature Request: Add Animations
siba2893 opened this issue · comments
Hey this is fantastic and should be included in the Vuetify library, you should propose it in to John.
Hey could you please add support for animations, when snackbars come in and go out? Right now they look to stiff as they just appear and dissapear.
Awesome work
@siba2893 are you using the latest version? 2.1.2? There was a bug that was fixed in that version that fixed the animations. Before the bug fix, they just popped into existence. But after that fix, they slide in nicely for me - with just the animation that I would expect to see.
Hmm, now that I am writing this and re-reading your comment, maybe you when a single snackbar appears for the first time. I was thinking about what happens when you have multiple snackbars and the top one expires and disappears. That animation smoothly slides everything up.
But I guess I would agree that it would be nice to have a smoother transition when the message appears and disappears.
I started to work on it. I'll publish a new version when it's completed.
@gregveres thanks for your response, I've seen some animations happening but they still don't leave gracefully maybe it would be cool if the slide in from right to left if the snack bar is on top right and leave gracefully in the same way.
@Aymkdn thank you very much!!
This plugin added so much more coolness to my app, as I was using a self made system using vuetify alerts but I don't like alerts that much jajaja.
Yea, I agree. I like it.
I have noticed that it assumes that the snackbars are one line high of text. Most of mine are multi-line and don't stack well when there are multiple. I will take a look at that when I get time.
But I am definitely seeing animations that are fairly smooth when there are multiple on screen.
I'd like to get some help with this https://forum.vuejs.org/t/how-to-track-changes-for-array-elements/100764 to improve how it deals with changes in the prop array.... If what I'm looking for is not possible then I'll have to figure out something else.
My folks are visiting these days so I won't have time to finish it anyway. I'll try to publish a new version later this week!
@Aymkdn My project is in a state where the UI doesn't build and I have a significant amount of back end work to complete before I can get back to fixing the front end. But when I get that done, I will check back here to see if you still need some help.
I am more familiar with the composition API because I decided from the get go to use it rather than the options API. But I think the way to track changes in the prop is to add a watch, which I see that you have already. What specifically are you trying to do? I know with the new composition API the signature of the watch has "new" and "old" as arguments, providing the new value of the thing being watched and the old value of the thing being watched. I think the 2.x options API has that too.
I think you might need to pass a flag for deep watch to the watch function:
https://vuejs.org/v2/api/#vm-watch
The watch as it is today is not enough for what I wanted to do. I will use it if what I want is not possible anymore.
I made some good progress, but I still have some bugs… and not too much time to work on it!
Regarding https://forum.vuejs.org/t/how-to-track-changes-for-array-elements/100764 I ended up with creating my own system. I'll update this forum's post later to make sure I share how to proceed for future reference :-)
I've just published v3.0.0 that supports transition.
Example:
<v-snackbars :messages.sync="messages" color="red" transition="fab-transition" bottom left></v-snackbars>Awesome Thanks!