Animation on reactive web apps
Application Type
Reactive

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

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? 

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

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.