mos Posted February 3, 2018 Share Posted February 3, 2018 I have two panels ie. Panel 1 and Panel 2 and need to perform a fading transition effect between the two panels. e.g. Panel 1 is visible and then it fades out while Panel 2 is fading in. How could I achieve the above transition effect? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted February 3, 2018 Share Posted February 3, 2018 Hi, For example, fadeIn: UniPanel1.JSInterface.JSCode(#1'.el.fadeIn({duration: 1000});'); fadeOut: UniPanel1.JSInterface.JSCode(#1'.el.fadeOut({duration: 1000});'); And then use your logic... Quote Link to comment Share on other sites More sharing options...
mos Posted February 4, 2018 Author Share Posted February 4, 2018 Hi Delphi Developer, This doesn't seem to work if the Panel.Visible = False and you try Fade In the panel as the panel just suddenly appears. Ideally what I want is when Panel 1 fades out I want Panel 2 which is hidden to simultaneously fade in. Quote Link to comment Share on other sites More sharing options...
mos Posted April 20, 2018 Author Share Posted April 20, 2018 Hi Delphi Developer, I found this code on the ExtJS site is it possible to get this working: Ext.Anim.run(panelOne, 'fade', { duration: 100, after: function() { panelOne.hide(); } }); Ext.Anim.run(panelTwo, 'fade', { out: false, duration: 100, before: function() { panelTwo.show(); } }); Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 20, 2018 Share Posted April 20, 2018 Hi, You can use CSS opacity Property instead of Hidden property I guess. Quote Link to comment Share on other sites More sharing options...
mos Posted April 21, 2018 Author Share Posted April 21, 2018 Hi Delphi Developer, I tried the following code to set the opacity of a Panel within a TUniTimer event with the following code: procedure TMainForm.UniTimer1Timer(Sender: TObject); begin UniTimer1.Enabled := False; try UniPanel2.JSInterface.JSConfig('style', [UniPanel2.JSControl.JSObject('opacity: 0')]); finally UniTimer1.Enabled := True; end; end; But when I do this I get the error attached. Build 1413. Quote Link to comment Share on other sites More sharing options...
mos Posted April 21, 2018 Author Share Posted April 21, 2018 Hi Delphi Developer, I got around this error doing this way instead: procedure TMainForm.UniTimer1Timer(Sender: TObject); begin UniTimer1.Enabled := False; try UniSession.AddJS('document.getElementById("'+self.UniPanel2.JSControl.Id+'").style.opacity="0";'); finally UniTimer1.Enabled := True; end; end; Another Question: With the fadeOut is it possible to be notified when the fadeOut has ended so I can then call some other Delphi code? Based on what I have seen you can setup a CallBack but I am not sure how to do this and then get the CallBack to call my Delphi code? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 21, 2018 Share Posted April 21, 2018 Hi, Another Question: With the fadeOut is it possible to be notified when the fadeOut has ended so I can then call some other Delphi code? Based on what I have seen you can setup a CallBack but I am not sure how to do this and then get the CallBack to call my Delphi code? Yes you can use a callback fn, for example: UniPanel1.JSInterface.JSCode(#1'.el.fadeOut({duration: 1000, callback: function(){'#1'.el.fadeIn({duration: 1000})}});'); To call Delphi code: procedure TMainForm.UniButton1Click(Sender: TObject); begin UniPanel1.JSInterface.JSCode(#1'.el.fadeOut({duration: 1000, callback: function(){ajaxRequest('#1', "fadeOutEnd", [])}});'); end; procedure TMainForm.UniPanel1AjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings); begin if EventName = 'fadeOutEnd' then begin // ShowMessage('fadeOutEnd'); end; end; Best regards, Quote Link to comment Share on other sites More sharing options...
mos Posted April 21, 2018 Author Share Posted April 21, 2018 Hi Delphi Developer, Works Great. Thank you very much for your help. Quote Link to comment Share on other sites More sharing options...
millenox Posted November 15, 2018 Share Posted November 15, 2018 Hi, i use this to fadeIn a panel On 2/3/2018 at 9:05 PM, Sherzod said: UniPanel1.JSInterface.JSCode(#1'.el.fadeIn({duration: 1000});'); But when panel appear he don't keep the dimension and text align Any idea ? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 15, 2018 Share Posted November 15, 2018 3 hours ago, millenox said: But when panel appear he don't keep the dimension and text align Hello, Can you please specify which edition and build of UniGUI are you using? Quote Link to comment Share on other sites More sharing options...
millenox Posted November 16, 2018 Share Posted November 16, 2018 I use Professional edition, version 1.10.0.1458 Quote Link to comment Share on other sites More sharing options...
millenox Posted November 16, 2018 Share Posted November 16, 2018 I forgot to say, at start i set visible property of the panel to false Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 16, 2018 Share Posted November 16, 2018 59 minutes ago, millenox said: I use Professional edition, version 1.10.0.1458 In any case, first of all visit here: 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.