y0hami
commented
5 years ago Discord transcript:
Angius:
So, I just got an idea for a cool icon button effect, to emphasize that it's been clicked: https://jsfiddle.net/Angius/36myhaor/26/
No idea how SUI code works, though, so forgive me it's not a PR
hammy2899 🎅:
Its a cool effect but I dont think we will add it to the framework, IMHO it would just be bloat
Angius:
Well, it's your call
Code's short and simple enough for me to just copypaste it onto my site
prudho:
I like this effect, and maybe we could consider adding this in the transition module
Angius:
So, should I open an issue?
hammy2899 🎅:
My main problem with this is that if you click it multiple times at once it has to wait for the transition to be over before showing it again
the only way to over come this is by using js instead of css
and that would mean 1 of 2 things bring in an effects lib or write our own
Angius:
Well it is a draft I whipped out only just now
prudho:
I don't know, I wish i had more time to make some tests with this
Because I really like it !
Basically it could be an ui animated button (which already exists), and on hover or click launch a transition called explode
Angius:
I'll just open an issue so the discussion doesn;t get lost
hammy2899 🎅
I'm pretty sure the transitions module queues transitions if set of multiple times
and I think that would be a bit weird for this kind of animation
it should be reactive to the action
so if the user clicks it twice it should fire twice one after the other but at the same time
Feature Request
Description
An animation of an icon exploding outwards and fading, to emphasize the action taken. Useful for positive feedback for buttons like "favourite" or "add to cart"
Example
https://jsfiddle.net/Angius/36myhaor/