Jump to content

Fading In and Out Between Two Panels


mos

Recommended Posts

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

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

  • 2 months later...

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

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.

post-5257-0-91409900-1524313377_thumb.png

Link to comment
Share on other sites

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

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

  • 6 months later...

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...