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? 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... 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. 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(); } }); 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. 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. 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? 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, 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. 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 ? 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? 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 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 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: Link to comment Share on other sites More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now