Hello! I'm working on an app where i need to implement an animation to an element when it is updated via dropdown by the user. I know how to do this on traditional web apps with ajax refresh, but i havent found a way to do it in reactive.
Situation is following, page contains a dropdown selector and a table. The table displays the data and the data in the table is updated by dropdown. How can i implement an animation to the table expressions when user changes the value from dropdown?
Hi Roni,
you can use Animate or Animated Label widgets available in OutSystems UI.
Use a control variable to tell if the animation is visible or not and change to True that variable inside the Dropdown OnChange Event.
Regards
Hey, thanks for the tip, but i have already tried the animate widget. How do you set visible option to animate widget? In my understanding, if you enclose it with a container, you would lose the visibility of the expression inside the animation
Using an IF widget
thanks for the tip, i got it working now. Only problem still exists, im supposed to make the animation to a background color change that fades away eventually, but there is no option to that in animate widget. I want it to be the same as in ajax refresh. Do you have any tips considering this?
For more specific animations you can use CSS.
Something like this:
https://stackoverflow.com/questions/16905621/how-to-fade-in-background-image-by-css3-animation
This did not help me much, problem is that i dont know how to implement the css into the animation.
You don't implement in the animation, you implement i.e. in a container applying that CSS to the style.
I don't know exactly what you want to implement but I'm sure with CSS you can do it.
I think here you get what you need:
https://blog.hubspot.com/website/css-fade-in