2022-09-04 15-01-10
JayPea
146Views
5Comments
Solved
Is there a way to have a pop up fade in?
Question
Reactive

Hi,

I'm using the pop up widget in OutSystems react.

Is there a property somewhere which will have the pop fade in rather than just appear.

The popup is triggered on an onfocus event on a form field.

0
0
14 Oct 2022
Solution

To do a fade/animation, you need to use visibility and opacity styles, not display.

You can customize the popup (i think it's possible, but not certain) or create one of your own and use these classes/styles.

https://blog.hubspot.com/website/css-fade-in

Kind Regards,

Márcio

1
0
14 Oct 2022

Hi JayPea ,

For this  requirement, I create a demo screen 

here we use this css:

.popup-dialog{

animation: fadeInAnimation ease 3s;

animation-iteration-count: 1;

animation-fill-mode: forwards; }                

@keyframes fadeInAnimation {           

 0%   {   opacity: 0;            }        

 100% { opacity: 1;            }    

    }

Demo screen : https://personal-ddjq2r3a.outsystemscloud.com/FadeIn/FadeIn?_ts=638014481444769964

Hope it help you .

Thanks

FadeIn.oml
1
0
15 Oct 2022

Hi Kundan,
How do you apply this on fading out instead after closing the popup?

Regards,
Jeremy

0
0
31 Aug

Hi @KUNDAN CHAUHAN 

I ended up implementing a solution similar to yours so thanks.  Still think there should be an easier way to do this.  There should be a checkbox or something in the properties of the pop up for animation.

0
0
17 Oct 2022

Yes @JayPea ,

I agree with your point.

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