Small animation of forms on show

[d.bernaert]

Hi,

I would like to add a small animation to my forms when showing, including the login form.

For example this page: http://angular-material.fusetheme.com/pages/auth/login

It slides in the form from the bottom but not completely from the bottom, only partly.

Can this be done in Unigui?

Thx,

Dominique

[bdiri]

Hi 

this topic can help you

 

[d.bernaert]

Hi

Thx, but there seems to be a file missing in the download.

Dominique

[Sherzod]

2 hours ago, d.bernaert said:

a small animation

function window.show(sender, eOpts)
{
    var el = sender.getEl();
 
    el.setOpacity(0);
    el.fadeIn({
        duration: 3000
    });
}

 

[d.bernaert]

Great Sherzod, thx!

Is it possible to combine this with a small movement?

All forms are centered, so if I could combine this with for instance a travel from 100 pixels below the center to the center with the same timing, that would create a beautiful effect I think.

Is that possible?

Dominique

[Sherzod]

Yes. I will check. 

[d.bernaert]

Hi Sherzod,

I'm having another problem with the css you provided.

My custom theme has a shadow and the shadow seems to disappear when using the css provided in the login screen.

Very strange.

Included you can find a screenshot of the shadow that is normally visible.

[Sherzod]

4 hours ago, d.bernaert said:

Is it possible to combine this with a small movement?

All forms are centered, so if I could combine this with for instance a travel from 100 pixels below the center to the center with the same timing, that would create a beautiful effect I think.

function window.show(sender, eOpts)
{
    var el = sender.getEl();
 
    el.setOpacity(0);
    el.setY(el.getY()+100);
    el.fadeIn({
        duration: 2000,
        y: el.getY()-100
    });
}

 

[artem_niko]

On 11/28/2020 at 6:31 PM, Sherzod said:

function window.show(sender, eOpts)
{
    var el = sender.getEl();
 
    el.setOpacity(0);
    el.fadeIn({
        duration: 3000
    });
}

 

Hello!

How do I create a similar code so that the form disappears as smoothly as it appears, thanks to the code in windows.show events?

[Sherzod]

On 11/3/2022 at 3:27 PM, artem_niko said:

How do I create a similar code so that the form disappears as smoothly as it appears, thanks to the code in windows.show events?

Hello,

I will check.

[Sherzod]

On 11/3/2022 at 3:27 PM, artem_niko said:

How do I create a similar code so that the form disappears as smoothly as it appears, thanks to the code in windows.show events?

One possible solution:

function window.beforeclose(panel, eOpts) 
{
    if (!panel.isClosable) {
        panel.animate({
            duration: 1000,
            to: {
                opacity: 0
            },
            listeners: {
                afteranimate: function() {
                    panel.isClosable = true;
                    panel.close()
                }
            }
        });
    }
    return (panel.isClosable == true)
}

 

[artem_niko]

12 hours ago, Sherzod said:

One possible solution:

function window.beforeclose(panel, eOpts) 
{
    if (!panel.isClosable) {
        panel.animate({
            duration: 1000,
            to: {
                opacity: 0
            },
            listeners: {
                afteranimate: function() {
                    panel.isClosable = true;
                    panel.close()
                }
            }
        });
    }
    return (panel.isClosable == true)
}

 

Perfect! Working

 

Tell me something else. 
I am creating a form dynamically and I want to prescribe these effects to a dynamically created form. 
How to correctly register this in the code forcibly, maybe somehow through JSInterface, how?

[Sherzod]

5 hours ago, artem_niko said:

Tell me something else. 
I am creating a form dynamically and I want to prescribe these effects to a dynamically created form. 
How to correctly register this in the code forcibly, maybe somehow through JSInterface, how?

Yes, 

Using the ClientEvents property, or the JSInterface.JSAddListener method. On the forum you will find many examples of using both.

[PS1]

On 11/4/2022 at 5:33 PM, Sherzod said:

One possible solution:

function window.beforeclose(panel, eOpts) 
{
    if (!panel.isClosable) {
        panel.animate({
            duration: 1000,
            to: {
                opacity: 0
            },
            listeners: {
                afteranimate: function() {
                    panel.isClosable = true;
                    panel.close()
                }
            }
        });
    }
    return (panel.isClosable == true)
}

 

Can you please provide mobile version too?

[Sherzod]

2 hours ago, PS1 said:

Can you please provide mobile version too?

This post may help you, can you check!?

 

[PS1]

No, i think you didn't understand me correctly, although this post will help me too.

I want to create my own animation. Like you (in the post i quoted previously), but mobile versions dont have beforeClose js functions and i don't know how to code it in beforeHide js function (in mobile UNIGUI)

[Sherzod]

Doesn't this help for the mobile form?

 

[PS1]

If i understand coreclty, in that post you provided solution to use build-in animation in UNIGUI (fade,fadeout,flip,pop,poput, etc...). 

 

In my case i want to create my own animation like you in post below (which is animation for desktop version)

One possible solution:

function window.beforeclose(panel, eOpts) 
{
    if (!panel.isClosable) {
        panel.animate({
            duration: 1000,
            to: {
                opacity: 0
            },
            listeners: {
                afteranimate: function() {
                    panel.isClosable = true;
                    panel.close()
                }
            }
        });
    }
    return (panel.isClosable == true)
}

 

[Sherzod]

Ok I will try to understand... and analyze. 

[PS1]

Ok, maybe i'll tell what i want to acompolish so it will be more clear.

In mobile UNIGUI there is HideAnimation = SlideOut. But it slides from right to left. In my application it is very confusing. I want to make it so it will slide from left to right.

You  provided animation code for desktop version of UNGUI.  Now i am askiing you if you could provide code with same effect but for mobile version of UNIGUI.

 

[Sherzod]

Are you using the Hide method?

[PS1]

No, im using ModalResult:=mrOk and FreeOnClose:=true

[Sherzod]

Can you please make a simple testcase !?

[PS1]

Here

test_case.zip

[Sherzod]

1 hour ago, PS1 said:

In mobile UNIGUI there is HideAnimation = SlideOut. But it slides from right to left. In my application it is very confusing. I want to make it so it will slide from left to right.

Do you mean ShowAnimation?