Jump to content

Small animation of forms on show


d.bernaert

Recommended Posts

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

Link to comment
Share on other sites

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.

Screenshot.png

Link to comment
Share on other sites

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
    });
}

 

  • Like 2
Link to comment
Share on other sites

  • 1 year later...
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?

Link to comment
Share on other sites

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)
}

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 10 months later...
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?

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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)
}

 

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...