d.bernaert Posted November 28, 2020 Share Posted November 28, 2020 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 Quote Link to comment Share on other sites More sharing options...
bdiri Posted November 28, 2020 Share Posted November 28, 2020 Hi this topic can help you Quote Link to comment Share on other sites More sharing options...
d.bernaert Posted November 28, 2020 Author Share Posted November 28, 2020 Hi Thx, but there seems to be a file missing in the download. Dominique Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 28, 2020 Share Posted November 28, 2020 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 }); } Quote Link to comment Share on other sites More sharing options...
d.bernaert Posted November 28, 2020 Author Share Posted November 28, 2020 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 Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 28, 2020 Share Posted November 28, 2020 Yes. I will check. Quote Link to comment Share on other sites More sharing options...
d.bernaert Posted November 28, 2020 Author Share Posted November 28, 2020 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. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 28, 2020 Share Posted November 28, 2020 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 }); } 2 Quote Link to comment Share on other sites More sharing options...
artem_niko Posted November 3, 2022 Share Posted November 3, 2022 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? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 4, 2022 Share Posted November 4, 2022 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. 1 Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 4, 2022 Share Posted November 4, 2022 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) } 1 1 Quote Link to comment Share on other sites More sharing options...
artem_niko Posted November 5, 2022 Share Posted November 5, 2022 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? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 5, 2022 Share Posted November 5, 2022 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. Quote Link to comment Share on other sites More sharing options...
PS1 Posted October 3, 2023 Share Posted October 3, 2023 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? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted October 3, 2023 Share Posted October 3, 2023 2 hours ago, PS1 said: Can you please provide mobile version too? This post may help you, can you check!? Quote Link to comment Share on other sites More sharing options...
PS1 Posted October 5, 2023 Share Posted October 5, 2023 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) Quote Link to comment Share on other sites More sharing options...
Sherzod Posted October 5, 2023 Share Posted October 5, 2023 Doesn't this help for the mobile form? Quote Link to comment Share on other sites More sharing options...
PS1 Posted October 5, 2023 Share Posted October 5, 2023 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) } Quote Link to comment Share on other sites More sharing options...
Sherzod Posted October 5, 2023 Share Posted October 5, 2023 Ok I will try to understand... and analyze. Quote Link to comment Share on other sites More sharing options...
PS1 Posted October 5, 2023 Share Posted October 5, 2023 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. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted October 5, 2023 Share Posted October 5, 2023 Are you using the Hide method? Quote Link to comment Share on other sites More sharing options...
PS1 Posted October 5, 2023 Share Posted October 5, 2023 No, im using ModalResult:=mrOk and FreeOnClose:=true Quote Link to comment Share on other sites More sharing options...
Sherzod Posted October 5, 2023 Share Posted October 5, 2023 Can you please make a simple testcase !? Quote Link to comment Share on other sites More sharing options...
PS1 Posted October 5, 2023 Share Posted October 5, 2023 Here test_case.zip Quote Link to comment Share on other sites More sharing options...
Sherzod Posted October 5, 2023 Share Posted October 5, 2023 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? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.