User Popup Fade IN

Answered
0
0

Hi there,

I try to fade in a user popup. I have added the animation control and defined the fade in on the appear event. It works but it first shows the popup, then immediately hides it and fades it in. How can I prevent it from first showing?

Regards Rudy

  • You must to post comments
Best Answer
0
0

It happens because the styles are not applied immediately, they are cached and the flushed all at once. I changed the event handler like this:

private void upMainMenu_VisibleChanged(object sender, EventArgs e)
{
upMainMenu.Eval(“this.getContentElement().setStyles({ \”box-shadow\”: \”6px 6px 3px #C0C0C0\”, \”opacity\”: 0}, true)”);
}

This way it’s only 1 call. The last parameter “true” is the direct argument which makes the library apply the styles immediately.

I also added .Visible = false in designer.cs and commented out upMainMenu.Hide() and the otehr eval. You need only 1 in VisibleChanged.

In any case, the next update will recognize “appear” animations and automatically apply the first animation frame right away so this is not necessary anymore. We also added a dozen or so new animations.

 

  • Rudy
    • Rudy
    • May 31, 2018 - 2:10 am
    Thanks – awesome, looking forward to it :)
  • You must to post comments
1
0

Hi Rudy,

enhancement WJ-8958 is now included in the latest Wisej dev build (1.4.99).

Best regards
Frank

  • You must to post comments
0
0

Hi Luca,

thanks for your help. I managed to get it working the first time the popup is displayed. However, if I re-open it via the desktop menu button it shows the wrong behavior. I have attached a sample project.

Best Regards
Rudy

  • You must to post comments
0
0

Yep. The problem is that the appear event it fired after the html elements have been created in the browser. To have the fadein work properly, the popup should be created with opacity 0. There are several solutions:

 

  • we’ll add a “show” and “hide” event to the javascript layer. now we have “changeVisibility” but the Animation extender cannot read the arguments of the event to see if it’s showing or hiding.
  • you can create the popup with opacity 0 using the StyleSheet extender; or
  • add:

protected override void OnVisibleChanged(EventArgs e)
{
if (this.Visible)
this.Eval(“this.getContentElement().setStyle(‘opacity’, 0)”);

base.OnVisibleChanged(e);
}

HTH

  • You must to post comments
Showing 4 results
Your Answer

Please first to submit.