[v1] slide-left/slide-right transition easing
so far I absolutely love everything about the upcomming version 1! I’m so excited for the release! Outstanding work!! :DD
…But there is one thing I don’t like and it really bothers me: The
slide-right, and so on transitions. I like them in pre-v1 much, much more.
It affects for example this:
<q-menu transition-show="slide-left" transition-hide="slide-right" >
<q-tab-panels v-model="panel" animated>
And you can also see it when you click on the tabs inside the documentation pages.
It doesn’t affect for example the
QSlideTransitioncomponent or the
QExpansionItemreveal. Those look fine.
I don’t know how to put it… it’s not the speed or the smoothness, it’s the animation curve that goes like “WHOOSH! In your face”. I wish it was more… idk, easefully.
When I first encountered it while browsing the v1 documentation pages, it literally made me jump a bit!
If you don’t know what I mean, I feel like the transition is more like “easeInOutCirc” as described here: https://easings.net/en (but I can’t exactly tell). But I would rather have something like “easeInOutQuart” or something in that direction - it’s the middle part that is too hectic for my taste.
Is there maybe an option that I missed? Or is it planned?
My suggestion is that the the default transition should be changed. Or that there is an option (maybe even global) to change it so that it looks more like pre-v1.
What are your thoughts on that?
Done. Will be available in beta.12.
Wow! Awesome! I did not expect it to be changed right away
Thanks for the response! I appreciate this improvement.
Now that I think about it, maybe “easeInOutQuad” or even “easeOutQuart” would look nice, too (I haven’t tried it out)^^
But now I know that there are css rules which I could customize I haven’t thought about that
Personally I don’t see much difference, since the animation is so fast.
Whatever you do, don’t change the timer of the animations (let it be 0.3s).
You are right, there is indeed not much difference at for this animation duration.
I have now tried out a few options and I came to the conclusion that it definitely should be
easeOutCubic(see https://easings.net/de#easeOutCubic ). At least in my opinion.
I have made a little demonstration: https://jsfiddle.net/uvz4gam3/ (don’t look at the code; only consider the result window)
There you can see (when you switch the tabs) some different easing curves:
- The red one is the original (before your commit)
- The orange one is the change you have made (looks the same)
- And the blue one is the one I think looks the best
If you would change the default transition to that, I would be super happy
Brilliant demo. Puts things in perspective much easier.
Changed to easeOutCubic. (will be in beta.12).
Feel free to connect with me on Discord (Razvan) if you envision more enhancements that can be made.
@rstoenescu Very nice. Thanks!