For an application I am working on, there is an aspect that has two different buttons that display depending on if the button was toggled on or not (essentially kind of like liking a tweet, where clicking it once triggers the “toggled” button to appear, and clicking it again triggers the “not toggled” button to appear, so it switches between the two buttons). I was hoping to add some sort of animation to the button click, sort of in a similar vein to animations that come up when you like a tweet on Twitter, or a post on Instagram. It seems like I’m going to have to do this through custom CSS, is there a way to do this by either editing tags for one or both buttons to add some sort of animation? Or are there any resources regarding this topic that could point me in the right direction? Thank you!
First of all you need to have a css class that does the animation. You already mentioned that.
Second step is to have two buttons with different visibility. If you click on the button it executes some action that results in the button beeing invisible and the other to be visible (and the other way around. The easiest solution is by just using a boolean but it can also be based on a more complex expression).
The button that gets visible when clicking on the other one needs the class with the animation. The moment it becomes visible, the animation is executed.
The result is, that if you click on button a it disappears and button b appears with the animation.
Here is a quick and dirty test project that shows you what I mean. It is using animate css (https://animate.style/)